always show menu tooltips when on mobile

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import { env } from '$env/dynamic/public';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
 
 	let navPaths = [
 		{
@@ -57,8 +58,12 @@
 
 	let isTouch = false;
 	let nav: HTMLDivElement;
+
+	$: windowHeight = 0;
 </script>
 
+<svelte:window bind:innerHeight={windowHeight} />
+
 <svelte:body
 	on:touchend={(e) => {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -123,7 +128,10 @@
 			<ul class="bg-base-200 rounded">
 				{#each navPaths as navPath, i}
 					<li
-						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
+						class="flex justify-center tooltip"
+						class:tooltip-left,sm:tooltip-right={windowHeight > 450}
+						class:tooltip-top={windowHeight <= 450}
+						class:tooltip-open={isTouch || windowHeight <= 450}
 						data-tip={navPath.name}
 					>
 						<a
@@ -179,6 +187,12 @@
 		}
 		.main-menu li {
 			display: inline-block;
+
+			&::before {
+				transform-origin: 0;
+				transform: rotate(-90deg);
+				margin-bottom: -0.5rem;
+			}
 		}
 	}
 </style>