Merge pull request #4340 from itsjohncs/long-channel-names

Improve responsiveness of channel name and topic.

client/components/Chat.vue

@@ -35,7 +35,11 @@
 							<span type="button" aria-label="Save topic"></span>
 						</span>
 					</div>
-					<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
+					<span
+						v-else
+						:title="channel.topic"
+						:class="{topic: true, empty: !channel.topic}"
+						@dblclick="editTopic"
 						><ParsedMessage
 							v-if="channel.topic"
 							:network="network"

client/css/style.css

@@ -1052,7 +1052,10 @@ textarea.input {
 .header .title {
 	font-size: 15px;
 	padding-left: 6px;
-	flex-shrink: 0;
+	flex-shrink: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .topic-container {
@@ -1068,6 +1071,12 @@ textarea.input {
 	flex-grow: 1;
 	overflow: hidden;
 	font-size: 14px;
+	flex-shrink: 99999999;
+	min-width: 25px;
+}
+
+.header .topic.empty {
+	min-width: 0;
 }
 
 .header .topic-input {