style: try implementing nowrap and ellipsis

components/nav/button/Bookmark.vue

@@ -13,12 +13,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/bookmarks"
     :aria-label="$t('nav.bookmarks')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:bookmark-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.bookmarks') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.bookmarks') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Compose.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/compose"
     :aria-label="$t('nav.favourites')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:quill-pen-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Explore.vue

@@ -16,11 +16,12 @@ const hideLabel = computed(() => getPreferences(userSettings.value, 'hideBottomN
     :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`"
     :aria-label="$t('nav.explore')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
+    class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:compass-3-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.explore') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.explore') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Favorite.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/favourites"
     :aria-label="$t('nav.favourites')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:heart-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Federated.vue

@@ -13,12 +13,12 @@ const hideLabel = useHideBottomNavigationLabel()
     :to="`/${currentServer}/public`"
     :aria-label="$t('nav.federated')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:earth-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.federated') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.federated') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Hashtag.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/hashtags"
     :aria-label="$t('nav.hashtags')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:hashtag />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.hashtags') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.hashtags') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Home.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/home"
     :aria-label="$t('nav.home')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:home-5-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.home') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.home') }}</span>
   </NuxtLink>
 </template>

components/nav/button/List.vue

@@ -13,12 +13,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/lists"
     :aria-label="$t('nav.lists')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:list-check />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.lists') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.lists') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Local.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     group
     :to="`/${currentServer}/public/local`"
     :aria-label="$t('nav.local')" :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:group-2-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.local') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.local') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Mention.vue

@@ -11,12 +11,14 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/conversations"
     :aria-label="$t('nav.conversations')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:at-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.conversations') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>
+      {{ $t('nav.conversations') }}
+    </span>
   </NuxtLink>
 </template>

components/nav/button/MoreMenu.vue

@@ -10,14 +10,14 @@ const hideLabel = useHideBottomNavigationLabel()
     place-content-center h-full flex-1 cursor-pointer
   >
     <button
-      flex flex-col items-center place-content-center h-full flex-1
+      flex flex-col items-center place-content-center h-full flex-1 min-w-0
       class="select-none"
       :class="[show ? '!text-primary' : null, hideLabel ? null : 'gap-1'].filter(Boolean).join(' ')"
       :aria-label="$t('nav.more_menu')"
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
-      <span v-if="!hideLabel" text-xs>{{ $t('nav.more_menu') }}</span>
+      <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.more_menu') }}</span>
     </button>
   </NavBottomMoreMenu>
 </template>

components/nav/button/Notification.vue

@@ -16,7 +16,7 @@ const hideLabel = useHideBottomNavigationLabel()
     :to="`/notifications/${lastAccessedNotificationRoute}`"
     :aria-label="$t('nav.notifications')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
@@ -27,6 +27,6 @@ const hideLabel = useHideBottomNavigationLabel()
         {{ notifications < 10 ? notifications : '•' }}
       </div>
     </div>
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.notifications') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.notifications') }}</span>
   </NuxtLink>
 </template>

components/nav/button/Search.vue

@@ -11,12 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     to="/search"
     :aria-label="$t('nav.search')"
     :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1
+    flex flex-col items-center place-content-center h-full flex-1 min-w-0
     class="coarse-pointer:select-none"
     :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
     <div aria-hidden="true" i-ri:search-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.search') }}</span>
+    <span v-if="!hideLabel" text-xs overflow-hidden text-ellipsis whitespace-nowrap>{{ $t('nav.search') }}</span>
   </NuxtLink>
 </template>