From ab8faf7c992bac9e1ce4c20a9e4ec9a5652a5e01 Mon Sep 17 00:00:00 2001
From: Techanon <1837484+techanon@users.noreply.github.com>
Date: Sun, 31 Oct 2021 13:49:54 -0500
Subject: [PATCH] Fix chat width resizing when window is very thin

When the window resized to a small width, the chat header buttons would wrap to the next line, but would inline with the chat box itself making it resize to unreadable widths.
Changing the header to flex with some minor adjustments prevents the inline wrapping thus the chatbox retains it's intended width.
---
 www/css/cytube.css | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/www/css/cytube.css b/www/css/cytube.css
index 6da982c4..65f5058e 100644
--- a/www/css/cytube.css
+++ b/www/css/cytube.css
@@ -28,6 +28,11 @@
     padding-right: 5px;
 }
 
+#usercount {
+    white-space: nowrap;
+    flex-grow: 2;
+}
+
 #userlist {
     width: 120px;
     float: left;
@@ -90,6 +95,12 @@
     font-weight: bold;
 }
 
+#chatheader {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
 #chatheader > p, #videowrap-header {
     margin: 0;
 }
@@ -582,7 +593,7 @@ table td {
 }
 
 #userlisttoggle {
-    padding-top: 2px;
+    padding-bottom: 2px;
 }
 
 .queue_entry {