From 56d4a6afdef458d9f78305b7fc3a95c4773cd90c Mon Sep 17 00:00:00 2001
From: itsjohncs <johnsullivan.pem@gmail.com>
Date: Fri, 22 Oct 2021 13:52:51 -0700
Subject: [PATCH] Improve responsiveness of channel name and topic.

This commit makes two changes:

1. Long channel names are truncated.
2. Topics cannot be shrinked into non-existence.
---
 client/components/Chat.vue |  6 +++++-
 client/css/style.css       | 11 ++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 1761d4bc..c0d665d7 100644
--- a/client/components/Chat.vue
+++ b/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"
diff --git a/client/css/style.css b/client/css/style.css
index edf84fa5..0aa11e3b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1051,7 +1051,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 {
@@ -1067,6 +1070,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 {