Avoid sidebar resizing based on channel contents

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;

index.html

@@ -16,7 +16,6 @@
 			document.body.className = "yesscript";
 		</script>
 
-		<div class="sidebar">
 		<div class="sidebar-head">
 			<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
 
@@ -41,7 +40,6 @@
 		</div>
 
 		<ul id="channel_list"></ul>
-		</div>
 
 		<div class="main-area">
 			<div id="channel_header"></div>