diff --git a/src/lib/components/layout/navigation/Navbar.svelte b/src/lib/components/layout/navigation/Navbar.svelte
index 45a226a..d4d9b58 100644
--- 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
index dc6d51c..8c6d2c4 100644
--- 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>