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>

src/routes/streams/Sidebar.svelte

@@ -198,4 +198,10 @@
 	.material-icons::-moz-focus-inner {
 		border: 0;
 	}
+
+	@media (max-width: 500px) {
+		.stream-item-star {
+			opacity: 0.5;
+		}
+	}
 </style>

src/routes/streams/[stream_id]/+page.svelte

@@ -24,15 +24,14 @@
 <style>
 	#streamContainer {
 		display: grid;
-		grid-template-rows: auto 1fr;
-		height: calc(100vh - 1em);
+		grid-template-rows: 1fr auto;
+		height: 100%;
+		gap: 0.5em;
 	}
 
 	#streamPage {
 		grid-row: 1 / 2;
 		overflow: auto;
-		margin-bottom: 0.5em;
-		width: 100%;
 		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
 	}
 
@@ -40,5 +39,6 @@
 		grid-row: 2 / 3;
 		margin-left: 1px;
 		margin-right: 1px;
+		height: 100%;
 	}
 </style>

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -57,8 +57,6 @@
 	}
 
 	#table-container {
-		display: grid;
-		grid-template-columns: auto 1fr 1fr;
 		overflow-x: hidden;
 		margin-left: 3%;
 	}