From f9de94db08e60d014b508c3eb9e728764934f15f Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Sat, 30 Nov 2024 16:48:48 +0100
Subject: [PATCH] expand menu horizontal if screen height is small

---
 src/routes/+layout.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 09f6f43..765d1bb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -82,7 +82,7 @@
 </main>
 <nav>
 	<div
-		class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50"
+		class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50 main-menu"
 		class:hidden={onAdminPage}
 		bind:this={nav}
 	>
@@ -120,7 +120,7 @@
 			class:hidden={!showMenuPermanent}
 			class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
 		>
-			<ul class="flex flex-col bg-base-200 rounded">
+			<ul class="bg-base-200 rounded">
 				{#each navPaths as navPath, i}
 					<li
 						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
@@ -168,3 +168,17 @@
 		</div>
 	</footer>
 {/if}
+
+<style lang="scss">
+	@media (max-height: 450px) {
+		.main-menu {
+			flex-direction: row;
+		}
+		.main-menu > div {
+			padding: 0.25rem 0 0 0.5rem;
+		}
+		.main-menu li {
+			display: inline-block;
+		}
+	}
+</style>