From 193a70c6e843560159a260fcf8328baaff67ecc0 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 14 Aug 2024 19:13:19 -0400
Subject: [PATCH] fix dropdown text wrapping in other languages

---
 components/CollectionCard.tsx                 |  5 ++++-
 components/FilterSearchDropdown.tsx           | 18 +++++++++------
 .../LinkViews/LinkComponents/LinkActions.tsx  |  7 +++++-
 components/MobileNavigation.tsx               |  5 ++++-
 .../EditCollectionSharingModal.tsx            | 20 +++++++++++------
 components/ModalContent/NewTokenModal.tsx     | 22 ++++++++++++++-----
 components/Navbar.tsx                         |  5 ++++-
 components/ProfileDropdown.tsx                |  8 ++++---
 components/SortDropdown.tsx                   | 22 +++++++++++++------
 pages/collections/[id].tsx                    |  6 ++++-
 pages/dashboard.tsx                           |  5 ++++-
 pages/settings/account.tsx                    | 14 +++++++++---
 pages/tags/[id].tsx                           |  4 +++-
 13 files changed, 101 insertions(+), 40 deletions(-)

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index aaf177e..432425c 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -80,7 +80,7 @@ export default function CollectionCard({ collection, className }: Props) {
         >
           <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
           {permissions === true && (
             <li>
               <div
@@ -90,6 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
                   (document?.activeElement as HTMLElement)?.blur();
                   setEditCollectionModal(true);
                 }}
+                className="whitespace-nowrap"
               >
                 {t("edit_collection_info")}
               </div>
@@ -103,6 +104,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 (document?.activeElement as HTMLElement)?.blur();
                 setEditCollectionSharingModal(true);
               }}
+              className="whitespace-nowrap"
             >
               {permissions === true
                 ? t("share_and_collaborate")
@@ -117,6 +119,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 (document?.activeElement as HTMLElement)?.blur();
                 setDeleteCollectionModal(true);
               }}
+              className="whitespace-nowrap"
             >
               {permissions === true
                 ? t("delete_collection")
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 68bb55b..a0adc37 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -29,7 +29,7 @@ export default function FilterSearchDropdown({
       >
         <i className="bi-funnel text-neutral text-2xl"></i>
       </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -45,7 +45,7 @@ export default function FilterSearchDropdown({
                 setSearchFilter({ ...searchFilter, name: !searchFilter.name })
               }
             />
-            <span className="label-text">{t("name")}</span>
+            <span className="label-text whitespace-nowrap">{t("name")}</span>
           </label>
         </li>
         <li>
@@ -63,7 +63,7 @@ export default function FilterSearchDropdown({
                 setSearchFilter({ ...searchFilter, url: !searchFilter.url })
               }
             />
-            <span className="label-text">{t("link")}</span>
+            <span className="label-text whitespace-nowrap">{t("link")}</span>
           </label>
         </li>
         <li>
@@ -84,7 +84,9 @@ export default function FilterSearchDropdown({
                 })
               }
             />
-            <span className="label-text">{t("description")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description")}
+            </span>
           </label>
         </li>
         <li>
@@ -102,7 +104,7 @@ export default function FilterSearchDropdown({
                 setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
               }
             />
-            <span className="label-text">{t("tags")}</span>
+            <span className="label-text whitespace-nowrap">{t("tags")}</span>
           </label>
         </li>
         <li>
@@ -123,8 +125,10 @@ export default function FilterSearchDropdown({
                 })
               }
             />
-            <span className="label-text">{t("full_content")}</span>
-            <div className="ml-auto badge badge-sm badge-neutral">
+            <span className="label-text whitespace-nowrap">
+              {t("full_content")}
+            </span>
+            <div className="ml-auto badge badge-sm badge-neutral whitespace-nowrap">
               {t("slower")}
             </div>
           </label>
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index d795f5e..3abc06d 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -86,7 +86,7 @@ export default function LinkActions({
           <i title="More" className="bi-three-dots text-xl" />
         </div>
         <ul
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
+          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
             alignToTop ? "" : "translate-y-10"
           }`}
         >
@@ -98,6 +98,7 @@ export default function LinkActions({
                 (document?.activeElement as HTMLElement)?.blur();
                 pinLink();
               }}
+              className="whitespace-nowrap"
             >
               {link?.pinnedBy && link.pinnedBy[0]
                 ? t("unpin")
@@ -113,6 +114,7 @@ export default function LinkActions({
                   (document?.activeElement as HTMLElement)?.blur();
                   toggleShowInfo();
                 }}
+                className="whitespace-nowrap"
               >
                 {!linkInfo ? t("show_link_details") : t("hide_link_details")}
               </div>
@@ -127,6 +129,7 @@ export default function LinkActions({
                   (document?.activeElement as HTMLElement)?.blur();
                   setEditLinkModal(true);
                 }}
+                className="whitespace-nowrap"
               >
                 {t("edit_link")}
               </div>
@@ -141,6 +144,7 @@ export default function LinkActions({
                   (document?.activeElement as HTMLElement)?.blur();
                   setPreservedFormatsModal(true);
                 }}
+                className="whitespace-nowrap"
               >
                 {t("preserved_formats")}
               </div>
@@ -171,6 +175,7 @@ export default function LinkActions({
                       }
                     : setDeleteLinkModal(true);
                 }}
+                className="whitespace-nowrap"
               >
                 {t("delete")}
               </div>
diff --git a/components/MobileNavigation.tsx b/components/MobileNavigation.tsx
index fda7f98..114e8ea 100644
--- a/components/MobileNavigation.tsx
+++ b/components/MobileNavigation.tsx
@@ -41,7 +41,7 @@ export default function MobileNavigation({}: Props) {
                 <i className="bi-plus text-5xl pointer-events-none"></i>
               </span>
             </div>
-            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
+            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mb-1 -ml-12">
               <li>
                 <div
                   onClick={() => {
@@ -50,6 +50,7 @@ export default function MobileNavigation({}: Props) {
                   }}
                   tabIndex={0}
                   role="button"
+                  className="whitespace-nowrap"
                 >
                   {t("new_link")}
                 </div>
@@ -62,6 +63,7 @@ export default function MobileNavigation({}: Props) {
                   }}
                   tabIndex={0}
                   role="button"
+                  className="whitespace-nowrap"
                 >
                   {t("upload_file")}
                 </div>
@@ -74,6 +76,7 @@ export default function MobileNavigation({}: Props) {
                   }}
                   tabIndex={0}
                   role="button"
+                  className="whitespace-nowrap"
                 >
                   {t("new_collection")}
                 </div>
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index 84dae82..f004af4 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/components/ModalContent/EditCollectionSharingModal.tsx
@@ -277,7 +277,7 @@ export default function EditCollectionSharingModal({
                                   {roleLabel}
                                   <i className="bi-chevron-down"></i>
                                 </div>
-                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
+                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
                                   <li>
                                     <label
                                       className="label cursor-pointer flex justify-start"
@@ -316,10 +316,12 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                           {t("viewer")}
                                         </p>
-                                        <p>{t("viewer_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("viewer_desc")}
+                                        </p>
                                       </div>
                                     </label>
                                   </li>
@@ -361,10 +363,12 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                           {t("contributor")}
                                         </p>
-                                        <p>{t("contributor_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("contributor_desc")}
+                                        </p>
                                       </div>
                                     </label>
                                   </li>
@@ -406,10 +410,12 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                           {t("admin")}
                                         </p>
-                                        <p>{t("admin_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("admin_desc")}
+                                        </p>
                                       </div>
                                     </label>
                                   </li>
diff --git a/components/ModalContent/NewTokenModal.tsx b/components/ModalContent/NewTokenModal.tsx
index 0528270..4d39aec 100644
--- a/components/ModalContent/NewTokenModal.tsx
+++ b/components/ModalContent/NewTokenModal.tsx
@@ -115,7 +115,7 @@ export default function NewTokenModal({ onClose }: Props) {
                 >
                   {getLabel(token.expires)}
                 </Button>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
                   <li>
                     <label
                       className="label cursor-pointer flex justify-start"
@@ -135,7 +135,9 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("7_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("7_days")}
+                      </span>
                     </label>
                   </li>
                   <li>
@@ -154,7 +156,9 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.oneMonth });
                         }}
                       />
-                      <span className="label-text">{t("30_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("30_days")}
+                      </span>
                     </label>
                   </li>
                   <li>
@@ -176,7 +180,9 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("60_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("60_days")}
+                      </span>
                     </label>
                   </li>
                   <li>
@@ -198,7 +204,9 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("90_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("90_days")}
+                      </span>
                     </label>
                   </li>
                   <li>
@@ -217,7 +225,9 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.never });
                         }}
                       />
-                      <span className="label-text">{t("no_expiration")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("no_expiration")}
+                      </span>
                     </label>
                   </li>
                 </ul>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index dcc78c5..5a09612 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -66,7 +66,7 @@ export default function Navbar() {
               </span>
             </div>
           </div>
-          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
             <li>
               <div
                 onClick={() => {
@@ -75,6 +75,7 @@ export default function Navbar() {
                 }}
                 tabIndex={0}
                 role="button"
+                className="whitespace-nowrap"
               >
                 {t("new_link")}
               </div>
@@ -87,6 +88,7 @@ export default function Navbar() {
                 }}
                 tabIndex={0}
                 role="button"
+                className="whitespace-nowrap"
               >
                 {t("upload_file")}
               </div>
@@ -99,6 +101,7 @@ export default function Navbar() {
                 }}
                 tabIndex={0}
                 role="button"
+                className="whitespace-nowrap"
               >
                 {t("new_collection")}
               </div>
diff --git a/components/ProfileDropdown.tsx b/components/ProfileDropdown.tsx
index d32893d..11d71a3 100644
--- a/components/ProfileDropdown.tsx
+++ b/components/ProfileDropdown.tsx
@@ -32,9 +32,7 @@ export default function ProfileDropdown() {
         />
       </div>
       <ul
-        className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box ${
-          isAdmin ? "w-48" : "w-40"
-        } mt-1`}
+        className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1`}
       >
         <li>
           <Link
@@ -42,6 +40,7 @@ export default function ProfileDropdown() {
             onClick={() => (document?.activeElement as HTMLElement)?.blur()}
             tabIndex={0}
             role="button"
+            className="whitespace-nowrap"
           >
             {t("settings")}
           </Link>
@@ -54,6 +53,7 @@ export default function ProfileDropdown() {
             }}
             tabIndex={0}
             role="button"
+            className="whitespace-nowrap"
           >
             {t("switch_to", {
               theme: settings.theme === "light" ? t("dark") : t("light"),
@@ -67,6 +67,7 @@ export default function ProfileDropdown() {
               onClick={() => (document?.activeElement as HTMLElement)?.blur()}
               tabIndex={0}
               role="button"
+              className="whitespace-nowrap"
             >
               {t("server_administration")}
             </Link>
@@ -80,6 +81,7 @@ export default function ProfileDropdown() {
             }}
             tabIndex={0}
             role="button"
+            className="whitespace-nowrap"
           >
             {t("logout")}
           </div>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 809d4c3..7dee461 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -27,7 +27,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -41,7 +41,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.DateNewestFirst}
               onChange={() => setSort(Sort.DateNewestFirst)}
             />
-            <span className="label-text">{t("date_newest_first")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("date_newest_first")}
+            </span>
           </label>
         </li>
         <li>
@@ -57,7 +59,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.DateOldestFirst}
               onChange={() => setSort(Sort.DateOldestFirst)}
             />
-            <span className="label-text">{t("date_oldest_first")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("date_oldest_first")}
+            </span>
           </label>
         </li>
         <li>
@@ -73,7 +77,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.NameAZ}
               onChange={() => setSort(Sort.NameAZ)}
             />
-            <span className="label-text">{t("name_az")}</span>
+            <span className="label-text whitespace-nowrap">{t("name_az")}</span>
           </label>
         </li>
         <li>
@@ -89,7 +93,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.NameZA}
               onChange={() => setSort(Sort.NameZA)}
             />
-            <span className="label-text">{t("name_za")}</span>
+            <span className="label-text whitespace-nowrap">{t("name_za")}</span>
           </label>
         </li>
         <li>
@@ -105,7 +109,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.DescriptionAZ}
               onChange={() => setSort(Sort.DescriptionAZ)}
             />
-            <span className="label-text">{t("description_az")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description_az")}
+            </span>
           </label>
         </li>
         <li>
@@ -121,7 +127,9 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               checked={sortBy === Sort.DescriptionZA}
               onChange={() => setSort(Sort.DescriptionZA)}
             />
-            <span className="label-text">{t("description_za")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description_za")}
+            </span>
           </label>
         </li>
       </ul>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 5ff146f..f8e24b3 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -134,7 +134,7 @@ export default function Index() {
               >
                 <i className="bi-three-dots text-xl" title="More"></i>
               </div>
-              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
                 {permissions === true && (
                   <li>
                     <div
@@ -144,6 +144,7 @@ export default function Index() {
                         (document?.activeElement as HTMLElement)?.blur();
                         setEditCollectionModal(true);
                       }}
+                      className="whitespace-nowrap"
                     >
                       {t("edit_collection_info")}
                     </div>
@@ -157,6 +158,7 @@ export default function Index() {
                       (document?.activeElement as HTMLElement)?.blur();
                       setEditCollectionSharingModal(true);
                     }}
+                    className="whitespace-nowrap"
                   >
                     {permissions === true
                       ? t("share_and_collaborate")
@@ -172,6 +174,7 @@ export default function Index() {
                         (document?.activeElement as HTMLElement)?.blur();
                         setNewCollectionModal(true);
                       }}
+                      className="whitespace-nowrap"
                     >
                       {t("create_subcollection")}
                     </div>
@@ -185,6 +188,7 @@ export default function Index() {
                       (document?.activeElement as HTMLElement)?.blur();
                       setDeleteCollectionModal(true);
                     }}
+                    className="whitespace-nowrap"
                   >
                     {permissions === true
                       ? t("delete_collection")
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index b9ba86d..5ee0f2d 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -214,13 +214,14 @@ export default function Dashboard() {
                     <i className="bi-cloud-upload text-xl duration-100"></i>
                     <p>{t("import_links")}</p>
                   </div>
-                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                     <li>
                       <label
                         tabIndex={0}
                         role="button"
                         htmlFor="import-linkwarden-file"
                         title={t("from_linkwarden")}
+                        className="whitespace-nowrap"
                       >
                         {t("from_linkwarden")}
                         <input
@@ -241,6 +242,7 @@ export default function Dashboard() {
                         role="button"
                         htmlFor="import-html-file"
                         title={t("from_html")}
+                        className="whitespace-nowrap"
                       >
                         {t("from_html")}
                         <input
@@ -261,6 +263,7 @@ export default function Dashboard() {
                         role="button"
                         htmlFor="import-wallabag-file"
                         title={t("from_wallabag")}
+                        className="whitespace-nowrap"
                       >
                         {t("from_wallabag")}
                         <input
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 52a68f4..2feddb3 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -242,9 +242,13 @@ export default function Account() {
                   <i className="bi-pencil-square text-md duration-100"></i>
                   {t("edit")}
                 </Button>
-                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                   <li>
-                    <label tabIndex={0} role="button">
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      className="whitespace-nowrap"
+                    >
                       {t("upload_new_photo")}
                       <input
                         type="file"
@@ -267,6 +271,7 @@ export default function Account() {
                             image: "",
                           })
                         }
+                        className="whitespace-nowrap"
                       >
                         {t("remove_photo")}
                       </div>
@@ -341,13 +346,14 @@ export default function Account() {
                   {t("import_links")}
                 </Button>
 
-                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                   <li>
                     <label
                       tabIndex={0}
                       role="button"
                       htmlFor="import-linkwarden-file"
                       title={t("from_linkwarden")}
+                      className="whitespace-nowrap"
                     >
                       {t("from_linkwarden")}
                       <input
@@ -368,6 +374,7 @@ export default function Account() {
                       role="button"
                       htmlFor="import-html-file"
                       title={t("from_html")}
+                      className="whitespace-nowrap"
                     >
                       {t("from_html")}
                       <input
@@ -388,6 +395,7 @@ export default function Account() {
                       role="button"
                       htmlFor="import-wallabag-file"
                       title={t("from_wallabag")}
+                      className="whitespace-nowrap"
                     >
                       {t("from_wallabag")}
                       <input
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 55262ab..6beecfc 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -194,7 +194,7 @@ export default function Index() {
                           className={"bi-three-dots text-neutral text-2xl"}
                         ></i>
                       </div>
-                      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
+                      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
                         <li>
                           <div
                             role="button"
@@ -203,6 +203,7 @@ export default function Index() {
                               (document?.activeElement as HTMLElement)?.blur();
                               setRenameTag(true);
                             }}
+                            className="whitespace-nowrap"
                           >
                             {t("rename_tag")}
                           </div>
@@ -215,6 +216,7 @@ export default function Index() {
                               (document?.activeElement as HTMLElement)?.blur();
                               remove();
                             }}
+                            className="whitespace-nowrap"
                           >
                             {t("delete_tag")}
                           </div>