basics of resonsive layout

src/routes/streams/+layout.svelte

@@ -11,15 +11,16 @@
 <style>
 	#mainContainer {
 		display: grid;
-		grid-template-columns: 25% 75%;
-		height: 100vh;
+		grid-template-columns: 25% 1fr;
+		height: calc(100vh - 1em); /* fallback */
+		height: calc(100dvh - 1em);
+		gap: 0.5em;
+		margin: 0.5em;
 	}
+
 	#sidebar {
 		grid-column: 1;
-		height: calc(100vh - 1em);
-		overflow: auto;
 		overflow-wrap: break-word;
-		margin: 0.5em;
 		scrollbar-gutter: stable;
 		overflow-y: scroll;
 		scrollbar-width: thin;
@@ -27,9 +28,24 @@
 
 	#content {
 		grid-column: 2;
-		margin: 0.5em;
-		margin-left: 0em;
 		height: calc(100vh - 1em);
-		scrollbar-gutter: stable;
+		height: calc(100dvh - 1em);
+	}
+
+	@media (max-width: 500px) {
+		#mainContainer {
+			grid-template-columns: 100%;
+			grid-template-rows: 70% 1fr;
+		}
+
+		#sidebar {
+			order: 1;
+			height: 100%;
+		}
+
+		#content {
+			grid-column: 1;
+			height: 100%;
+		}
 	}
 </style>