From 671cf3b44ea2db4802d078494e0644526b66e3f7 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Thu, 11 Jan 2024 00:07:15 +0100
Subject: [PATCH] basics of resonsive layout

---
 src/routes/streams/+layout.svelte             | 32 ++++++++++++++-----
 src/routes/streams/Sidebar.svelte             |  6 ++++
 src/routes/streams/[stream_id]/+page.svelte   |  8 ++---
 .../streams/[stream_id]/StreamPage.svelte     |  2 --
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/routes/streams/+layout.svelte b/src/routes/streams/+layout.svelte
index b0e1d87..5f1366b 100644
--- a/src/routes/streams/+layout.svelte
+++ b/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>
diff --git a/src/routes/streams/Sidebar.svelte b/src/routes/streams/Sidebar.svelte
index 00128ba..775af49 100644
--- a/src/routes/streams/Sidebar.svelte
+++ b/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>
diff --git a/src/routes/streams/[stream_id]/+page.svelte b/src/routes/streams/[stream_id]/+page.svelte
index 0db88e6..215c0ac 100644
--- a/src/routes/streams/[stream_id]/+page.svelte
+++ b/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>
diff --git a/src/routes/streams/[stream_id]/StreamPage.svelte b/src/routes/streams/[stream_id]/StreamPage.svelte
index 8721298..15d0cb6 100644
--- a/src/routes/streams/[stream_id]/StreamPage.svelte
+++ b/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%;
 	}