From bade38efc68710be173010f64cbba343d03067f4 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Tue, 16 Jan 2024 21:35:46 +0100
Subject: [PATCH] more responsive fixes

---
 src/routes/streams/+layout.svelte             |  2 +-
 src/routes/streams/Sidebar.svelte             |  3 +-
 src/routes/streams/[stream_id]/+page.svelte   |  7 +++
 .../streams/[stream_id]/StreamPage.svelte     | 56 +++++++++++++++----
 4 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/routes/streams/+layout.svelte b/src/routes/streams/+layout.svelte
index 5f1366b..0e3735f 100644
--- a/src/routes/streams/+layout.svelte
+++ b/src/routes/streams/+layout.svelte
@@ -32,7 +32,7 @@
 		height: calc(100dvh - 1em);
 	}
 
-	@media (max-width: 500px) {
+	@media (max-width: 575px) {
 		#mainContainer {
 			grid-template-columns: 100%;
 			grid-template-rows: 70% 1fr;
diff --git a/src/routes/streams/Sidebar.svelte b/src/routes/streams/Sidebar.svelte
index 775af49..41019d2 100644
--- a/src/routes/streams/Sidebar.svelte
+++ b/src/routes/streams/Sidebar.svelte
@@ -199,9 +199,10 @@
 		border: 0;
 	}
 
-	@media (max-width: 500px) {
+	@media (max-width: 575px) {
 		.stream-item-star {
 			opacity: 0.5;
+			font-size: 24px;
 		}
 	}
 </style>
diff --git a/src/routes/streams/[stream_id]/+page.svelte b/src/routes/streams/[stream_id]/+page.svelte
index 215c0ac..c9c6bab 100644
--- a/src/routes/streams/[stream_id]/+page.svelte
+++ b/src/routes/streams/[stream_id]/+page.svelte
@@ -41,4 +41,11 @@
 		margin-right: 1px;
 		height: 100%;
 	}
+
+	@media (max-width: 575px) {
+		#streamPage {
+			background: local url('/assets/result.png') top right / 80% no-repeat,
+				rgba(0, 0, 0, 0.8);
+		}
+	}
 </style>
diff --git a/src/routes/streams/[stream_id]/StreamPage.svelte b/src/routes/streams/[stream_id]/StreamPage.svelte
index 373a149..eeb9094 100644
--- a/src/routes/streams/[stream_id]/StreamPage.svelte
+++ b/src/routes/streams/[stream_id]/StreamPage.svelte
@@ -17,8 +17,10 @@
 </svelte:head>
 
 <div class="stream-information">
-	<h1 class="stream-date">{formattedStreamDate}</h1>
-	<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
+	<div class="stream-information-flexbox">
+		<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
+		<h1 class="stream-date">{formattedStreamDate}</h1>
+	</div>
 	<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
 </div>
 
@@ -32,12 +34,15 @@
 		{#each $currentStream.tracks as track, i}
 			<tr class:current={i == $currentSongIndex}>
 				<td class="timestamp-field"
-					>{formatTrackTime(track[0])}
-					<button
-						on:click={() => jumpToTrack(track[0])}
-						class="material-icons"
-						style="padding:4px; margin:-3px">fast_forward</button
-					>
+					><div class="timestamp-field-flex">
+						{formatTrackTime(track[0])}
+						<button
+							on:click={() => jumpToTrack(track[0])}
+							class="material-icons"
+							style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
+							>fast_forward</button
+						>
+					</div>
 				</td>
 				<td class="artist-field">{track[1]}</td>
 				<td class="track-field">{track[2]}</td>
@@ -56,6 +61,13 @@
 		position: relative;
 	}
 
+	.stream-information-flexbox {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-bottom: calc(1.17em - 4px); /* autism */
+	}
+
 	#table-container {
 		margin-left: 3%;
 	}
@@ -70,7 +82,7 @@
 
 	th,
 	td {
-		padding: 2px;
+		padding: 3px;
 		line-height: 1.15;
 	}
 
@@ -78,6 +90,11 @@
 		white-space: nowrap;
 	}
 
+	.timestamp-field-flex {
+		display: flex;
+		align-items: center;
+	}
+
 	.artist-field {
 		padding-right: 2em;
 	}
@@ -85,9 +102,8 @@
 	.stream-date {
 		font-size: x-large;
 		font-family: 'Montserrat';
-		right: 0;
-		position: absolute;
 		margin-right: 3%;
+		margin-bottom: 0;
 		text-decoration: underline;
 	}
 
@@ -97,6 +113,7 @@
 	}
 	.stream-id {
 		font-family: 'Montserrat';
+		margin-bottom: 0;
 	}
 
 	.current {
@@ -162,9 +179,24 @@
 		border: 0;
 	}
 
-	@media (max-width: 500px) {
+	@media (max-width: 575px) {
 		.material-icons {
 			opacity: 0.5;
 		}
+
+		.stream-id {
+			margin-bottom: 0px;
+		}
+
+		.stream-information {
+			width: initial;
+		}
+		.description-bubble {
+			max-width: initial;
+		}
+
+		.description-bubble::after {
+			visibility: hidden;
+		}
 	}
 </style>