From 3af86ffebb7e9942fe6b1551ab9bb9b443959fea Mon Sep 17 00:00:00 2001
From: Yordis Prieto <yordis.prieto@gmail.com>
Date: Wed, 30 Oct 2024 00:17:09 -0400
Subject: [PATCH] Fix: text overflowing in bookmarks (#4217)

Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>
---
 src/components/bookmarks/group.jsx | 2 +-
 src/components/bookmarks/item.jsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index b13aeac1..3a9f8323 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -20,7 +20,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse, gro
       className={classNames(
         "bookmark-group",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
-        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
+        layout?.header === false ? "flex-1 px-1 -my-1 overflow-hidden" : "flex-1 p-1 overflow-hidden",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
diff --git a/src/components/bookmarks/item.jsx b/src/components/bookmarks/item.jsx
index dcfcd43f..69097089 100644
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -29,9 +29,9 @@ export default function Item({ bookmark }) {
             )}
             {!bookmark.icon && bookmark.abbr}
           </div>
-          <div className="flex-1 flex items-center justify-between rounded-r-md bookmark-text">
-            <div className="flex-1 grow pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
-            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-300 text-xs bookmark-description">
+          <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
+            <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
+            <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
               {description}
             </div>
           </div>