more responsive fixes

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;

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>

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>

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>