mess around

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

@@ -1,40 +1,41 @@
 <script>
-    import StreamPage from './StreamPage.svelte';
-    import MetadataEditor from './MetadataEditor.svelte';
-    import Player from './Player.svelte';
-    import { page } from '$app/stores';
-    import { dev } from '$app/environment';
-    import { currentStream, updateCurrentStream } from '$lib/stores.js';
+	import StreamPage from './StreamPage.svelte';
+	import MetadataEditor from './MetadataEditor.svelte';
+	import Player from './Player.svelte';
+	import { page } from '$app/stores';
+	import { dev } from '$app/environment';
+	import { currentStream, updateCurrentStream } from '$lib/stores.js';
 
-    export let data;
-    $: updateCurrentStream(data.stream);
+	export let data;
+	$: updateCurrentStream(data.stream);
 </script>
 
 <div id="streamContainer">
-    <div id="streamPage">
-        {#if dev}
-            <MetadataEditor {...data} />
-        {/if}
-        <StreamPage />
-    </div>
-    <div id="player">
-        <Player display={true} src="/media/tracks/{$currentStream.filename}" />
-    </div>
+	<div id="streamPage" class="panel">
+		{#if dev}
+			<MetadataEditor {...data} />
+		{/if}
+		<StreamPage />
+	</div>
+	<div id="player">
+		<Player display={true} src="/media/tracks/{$currentStream.filename}" />
+	</div>
 </div>
 
 <style>
-    #streamContainer {
-        display: grid;
-        grid-template-rows: 85% 15%;
-        height: 100vh;
-    }
+	#streamContainer {
+		display: grid;
+		grid-template-rows: 85% 15%;
+		height: calc(100vh - 1em);
+	}
 
-    #streamPage {
-        grid-row: 1 / 2;
-        overflow: auto;
-    }
+	#streamPage {
+		grid-row: 1 / 2;
+		overflow: auto;
+		width: 100%;
+	}
 
-    #player {
-        grid-row: 2 / 3;
-    }
+	#player {
+		grid-row: 2 / 3;
+	}
 </style>