Better music layout

src/components/misc/musicselectionmodal.svelte

@@ -22,14 +22,18 @@
 		$CurrentMusicStore.paused = true;
 		await sleep(10);
 		$CurrentMusicStore.paused = false;
+		close();
+	};
+	function close() {
+		show = !show;
+		showMusicMan = false;
 	}
 </script>
 
 {#if show}
 	<div
 		on:click={() => {
-			show = !show;
-			showMusicMan = false;
+			close()
 		}}
 		class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
 	>

src/routes/__layout.svelte

@@ -25,24 +25,36 @@
 
 	// Modal stuff
 	let modalShow = false;
+
+	// Footer stuff
+	/**
+* @type {number}
+*/
+	let footerHeight;
+
 </script>
 
 <div class="-z-20 absolute">
 	<Musicplayer />
 </div>
 <div
-	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
+	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen text-murasaki overflow-auto min-h-screen relative "
 >
-	<!-- modal -->
-	<Musicselectionmodal bind:show={modalShow} />
-	<!-- Possible alert header -->
-	<!--<AlertHeader text='ALERT'/>-->
-	<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
+	<!-- Page content -->
+	<div class="" style="padding-bottom: {footerHeight + 10}px;">
+		<!-- modal -->
+		<Musicselectionmodal bind:show={modalShow} />
+		<!-- Possible alert header -->
+		<!--<AlertHeader text='ALERT'/>-->
+		<!-- Header -->
+		<Header />
+		<!-- Main content -->
+		<slot />
+	</div>
+	<!-- Footer -->
+	<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
 		<div class="h-full">
-			<button
-				on:click={onMusicToggle}
-				class="bg-white border-black border rounded h-min w-20 my-auto"
-			>
+			<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
 				{#if musicPaused}
 					<span class="font-mono">▶</span>
 					Play
@@ -61,10 +73,6 @@
 			<span>Current song: {musicArtist} - {musicTitle}</span>
 		</div>
 	</div>
-	<!-- Header -->
-	<Header />
-	<!-- Main content -->
-	<slot />
 </div>
 
 <!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 

tailwind.config.cjs

@@ -22,9 +22,6 @@ module.exports = {
     container: {
       center: true,
     },
-    minHeight: {
-      '1/2': '50%',
-    },
     screens: {
       'sm': '640px',
       // => @media (min-width: 640px) { ... }