Optimize the navigation bar to have buttons of the same width

Dlurak · Jul 22, 2024 · 33a1ebb · 33a1ebb
1 parent 8f3f95c
commit 33a1ebb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/lib/components/layout/navigation/Navbar.svelte b/src/lib/components/layout/navigation/Navbar.svelte
@@ -26,9 +26,11 @@
 			</a>
 		</div>
 
-		<div class="flex w-full items-center justify-evenly sm:w-fit">
+		<div
+			class="grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] w-full items-center justify-evenly sm:w-fit"
+		>
 			{#each $navEntries as navTarget (navTarget)}
-				<span class="flex-1" animate:flip={{ duration: $animationLength }}>
+				<span animate:flip={{ duration: $animationLength }}>
 					<NavigationButton target={navTarget} />
 				</span>
 			{/each}

diff --git a/src/lib/components/layout/navigation/NavigationButton.svelte b/src/lib/components/layout/navigation/NavigationButton.svelte
@@ -12,12 +12,14 @@
 	const showText = svocal('settings.nav.texts');
 </script>
 
-<button class="flex w-full flex-1 flex-col items-center px-3" on:click={data.action}>
+<button class="flex w-full flex-col items-center px-3" on:click={data.action}>
 	<div class="h-8 w-8 p-0.5">
 		<Icon src={data.icon} micro />
 	</div>
 
 	{#if $showText}
-		<span class="text-xs"><Store store={data.text} /></span>
+		<span class="w-full overflow-hidden truncate text-xs">
+			<Store store={data.text} />
+		</span>
 	{/if}
 </button>