ui(web): Fixed overflow issues for very long titles (#152)

* ui(web): Titles that exceed the allotted space now terminate with an ellipsis

ui(web): Very long titles now break in edit mode instead of overflowing horizontally

* ui(web): Titles on bookmark cards longer than two lines will terminate with an ellipsis

ui(web): Tooltips for long titles now wrap to multiple lines as needed

ui(web): Aligned titles in preview panes to the left margin

1 files changed, 10 insertions, 2 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index d282c3f4..e1cc1f7c 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -65,7 +65,11 @@ function ListView({
       </div>
       <div className="flex h-full flex-1 flex-col justify-between gap-2 overflow-hidden">
         <div className="flex flex-col gap-2 overflow-hidden">
-          {title && <div className="flex-none shrink-0 text-lg">{title}</div>}
+          {title && (
+            <div className="line-clamp-2 flex-none shrink-0 overflow-hidden text-ellipsis break-words text-lg">
+              {title}
+            </div>
+          )}
           {content && <div className="shrink-1 overflow-hidden">{content}</div>}
           <div className="flex shrink-0 flex-wrap gap-1 overflow-hidden">
             <TagList
@@ -104,7 +108,11 @@ function GridView({
       {img && <div className="h-56 w-full shrink-0 overflow-hidden">{img}</div>}
       <div className="flex h-full flex-col justify-between gap-2 overflow-hidden p-2">
         <div className="grow-1 flex flex-col gap-2 overflow-hidden">
-          {title && <div className="flex-none shrink-0 text-lg">{title}</div>}
+          {title && (
+            <div className="line-clamp-2 flex-none shrink-0 overflow-hidden text-ellipsis break-words text-lg">
+              {title}
+            </div>
+          )}
           {content && <div className="shrink-1 overflow-hidden">{content}</div>}
           <div className="flex shrink-0 flex-wrap gap-1 overflow-hidden">
             <TagList