From 94e2f65de65f2ff23997c025b117a104dba1e127 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sat, 4 Jan 2025 16:43:02 +0900
Subject: [PATCH] style: try implementing nowrap and ellipsis

---
 components/nav/button/Bookmark.vue     | 4 ++--
 components/nav/button/Compose.vue      | 4 ++--
 components/nav/button/Explore.vue      | 5 +++--
 components/nav/button/Favorite.vue     | 4 ++--
 components/nav/button/Federated.vue    | 4 ++--
 components/nav/button/Hashtag.vue      | 4 ++--
 components/nav/button/Home.vue         | 4 ++--
 components/nav/button/List.vue         | 4 ++--
 components/nav/button/Local.vue        | 4 ++--
 components/nav/button/Mention.vue      | 6 ++++--
 components/nav/button/MoreMenu.vue     | 4 ++--
 components/nav/button/Notification.vue | 4 ++--
 components/nav/button/Search.vue       | 4 ++--
 13 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/nav/button/Bookmark.vue b/components/nav/button/Bookmark.vue
index 6fed8bc4..d0ee94ab 100644
--- a/components/nav/button/Bookmark.vue
+++ b/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>
diff --git a/components/nav/button/Compose.vue b/components/nav/button/Compose.vue
index f65990fd..d30ccacc 100644
--- a/components/nav/button/Compose.vue
+++ b/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>
diff --git a/components/nav/button/Explore.vue b/components/nav/button/Explore.vue
index 6468a1d8..de67187a 100644
--- a/components/nav/button/Explore.vue
+++ b/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>
diff --git a/components/nav/button/Favorite.vue b/components/nav/button/Favorite.vue
index 8f6eed63..f8002b23 100644
--- a/components/nav/button/Favorite.vue
+++ b/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>
diff --git a/components/nav/button/Federated.vue b/components/nav/button/Federated.vue
index 192286af..48ae955a 100644
--- a/components/nav/button/Federated.vue
+++ b/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>
diff --git a/components/nav/button/Hashtag.vue b/components/nav/button/Hashtag.vue
index d2d39f3a..44bcf975 100644
--- a/components/nav/button/Hashtag.vue
+++ b/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>
diff --git a/components/nav/button/Home.vue b/components/nav/button/Home.vue
index 6f61f247..5c188466 100644
--- a/components/nav/button/Home.vue
+++ b/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>
diff --git a/components/nav/button/List.vue b/components/nav/button/List.vue
index 779c6645..0f5b00a9 100644
--- a/components/nav/button/List.vue
+++ b/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>
diff --git a/components/nav/button/Local.vue b/components/nav/button/Local.vue
index 492c6306..faa97f63 100644
--- a/components/nav/button/Local.vue
+++ b/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>
diff --git a/components/nav/button/Mention.vue b/components/nav/button/Mention.vue
index 86fd36f6..3e0faf87 100644
--- a/components/nav/button/Mention.vue
+++ b/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>
diff --git a/components/nav/button/MoreMenu.vue b/components/nav/button/MoreMenu.vue
index 092f6427..1a12db2c 100644
--- a/components/nav/button/MoreMenu.vue
+++ b/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>
diff --git a/components/nav/button/Notification.vue b/components/nav/button/Notification.vue
index d827f7e8..5f3dcc9a 100644
--- a/components/nav/button/Notification.vue
+++ b/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>
diff --git a/components/nav/button/Search.vue b/components/nav/button/Search.vue
index 446d65ee..b0bff8ad 100644
--- a/components/nav/button/Search.vue
+++ b/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>