From 26ebbcc190362943694655ee319e502dd35a856c Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Wed, 17 Feb 2021 17:42:02 +0100
Subject: [PATCH] Avoid sidebar resizing based on channel contents

---
 assets/main.css | 17 ++++++++---------
 index.html      | 42 ++++++++++++++++++++----------------------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 930312f..a288e9e 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -11,7 +11,9 @@ body {
 	color: #222;
 	line-height: 1.5;
 
-	display: flex;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	grid-template-columns: 20vw 1fr;
 }
 
 a button {
@@ -53,14 +55,10 @@ h1 img {
 	overflow-y: hidden;
 	display: grid;
 }
-.sidebar {
-	width: 300px;
-	overflow: hidden;
-	grid-template-rows: auto 1fr;
-	border-right: 1px solid #aaa;
-}
 .main-area {
-	flex-grow: 1;
+	grid-column: 2;
+	grid-row-start: 1;
+	grid-row-end: 3;
 	grid-template-rows: auto 1fr auto;
 	position: relative;
 }
@@ -69,6 +67,7 @@ h1 img {
 	background-color: #e5e5e5;
 	padding: 0.5em;
 	border-bottom: 1px solid #aaa;
+	border-right: 1px solid #aaa;
 }
 
 #channel_list {
@@ -76,12 +75,12 @@ h1 img {
 	height: 100%;
 	overflow-x: hidden;
 	overflow-y: scroll;
+	border-right: 1px solid #aaa;
 }
 #channel_list a {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	width: 300px;
 	display: block;
 	padding: 2px 10px;
 	color: #333;
diff --git a/index.html b/index.html
index f32160b..abf4881 100644
--- a/index.html
+++ b/index.html
@@ -16,33 +16,31 @@
 			document.body.className = "yesscript";
 		</script>
 
-		<div class="sidebar">
-			<div class="sidebar-head">
-				<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
+		<div class="sidebar-head">
+			<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
 
-				<div id="server_selection">
-					<ul id="server_selection_list"></ul>
-					<button id="server_selection_add">Add a server</button>
-				</div>
-
-				<form id="login" action="#">
-					<h2>Add a server</h2>
-					<div class="login-form">
-						<input type="text" id="login_server" placeholder="Server URL" value="http://localhost:8080" required/>
-
-						<input type="text" id="login_login_id" placeholder="Username or email" required/>
-						<input type="password" id="login_password" placeholder="Password" required/>
-					</div>
-
-					<input type="submit" id="login_button" value="Log in"/>
-					<input type="button" id="login_no_button" value="Cancel"/>
-					<div id="login_message"></div>
-				</form>
+			<div id="server_selection">
+				<ul id="server_selection_list"></ul>
+				<button id="server_selection_add">Add a server</button>
 			</div>
 
-			<ul id="channel_list"></ul>
+			<form id="login" action="#">
+				<h2>Add a server</h2>
+				<div class="login-form">
+					<input type="text" id="login_server" placeholder="Server URL" value="http://localhost:8080" required/>
+
+					<input type="text" id="login_login_id" placeholder="Username or email" required/>
+					<input type="password" id="login_password" placeholder="Password" required/>
+				</div>
+
+				<input type="submit" id="login_button" value="Log in"/>
+				<input type="button" id="login_no_button" value="Cancel"/>
+				<div id="login_message"></div>
+			</form>
 		</div>
 
+		<ul id="channel_list"></ul>
+
 		<div class="main-area">
 			<div id="channel_header"></div>