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, 2 insertions, 2 deletions

diff --git a/apps/web/components/dashboard/EditableText.tsx b/apps/web/components/dashboard/EditableText.tsx
index 7539bd8f..a8f61c13 100644
--- 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>
         )}