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
hoarder-app · May 16, 2024 · 747efa5 · 747efa5
1 parent 39025a8
commit 747efa5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/apps/web/components/dashboard/EditableText.tsx b/apps/web/components/dashboard/EditableText.tsx
@@ -96,7 +96,7 @@ function ViewMode({
 }: Props) {
   return (
     <Tooltip delayDuration={500}>
-      <div className="flex items-center gap-3 text-center">
+      <div className="flex max-w-full items-center gap-3">
         <TooltipTrigger asChild>
           {originalText ? (
             <p className={viewClassName}>{originalText}</p>
@@ -119,7 +119,7 @@ function ViewMode({
       </div>
       <TooltipPortal>
         {originalText && (
-          <TooltipContent side="bottom" className="max-w-[40ch]">
+          <TooltipContent side="bottom" className="max-w-[40ch] break-words">
             {originalText}
           </TooltipContent>
         )}

diff --git 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

diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -17,7 +17,7 @@ function LinkTitle({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
   const link = bookmark.content;
   const parsedUrl = new URL(link.url);
   return (
-    <Link className="line-clamp-2" href={link.url} target="_blank">
+    <Link href={link.url} target="_blank">
       {bookmark.title ?? link?.title ?? parsedUrl.host}
     </Link>
   );

diff --git a/apps/web/components/dashboard/preview/EditableTitle.tsx b/apps/web/components/dashboard/preview/EditableTitle.tsx
@@ -35,8 +35,8 @@ export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <EditableText
       originalText={title}
-      editClassName="p-2 text-center text-lg"
-      viewClassName="line-clamp-2 text-lg"
+      editClassName="p-2 text-lg break-all"
+      viewClassName="break-words line-clamp-2 text-lg text-ellipsis"
       untitledClassName="text-lg italic text-gray-600"
       onSave={(newTitle) => {
         updateBookmark(