Merge pull request #166 from ArnasDon/fix/reply-quote-overflow

fix(inbox): reply quote no longer overflows or single-lines (#165)

src/app/(dashboard)/inbox/page.tsx

@@ -530,10 +530,16 @@ export default function InboxPage() {
         {/* Center panel: Message thread.
             Hidden on mobile when no conversation is selected so the
             list can occupy the full width. Always visible on lg+
-            (shows its own empty-state if no thread is picked yet). */}
+            (shows its own empty-state if no thread is picked yet).
+
+            `min-w-0` is load-bearing: without it, a single wide piece
+            of content inside the thread (long quote preview, very
+            long URL in a message body) forces the flex child past
+            its share and pushes the contact-sidebar panel off-screen
+            on the right. Issue #165. */}
         <div
           className={cn(
-            "flex h-full flex-1 lg:flex",
+            "flex h-full min-w-0 flex-1 lg:flex",
             hasActiveConv ? "flex" : "hidden lg:flex",
           )}
         >

src/components/inbox/message-actions.tsx

@@ -85,7 +85,12 @@ export function MessageActions({
       onContextMenu={handleContextMenu}
       onBlur={() => setTouchOpen(false)}
     >
-      <div className="group/actions relative max-w-[75%]">
+      {/* `min-w-0` lets this flex child actually respect the 75% cap.
+       *  Default `min-width: auto` lets content (a long quote preview,
+       *  an unbroken URL) push past the cap and shove the row past
+       *  100%, which used to bleed across into the contact-sidebar
+       *  area. See issue #165. */}
+      <div className="group/actions relative min-w-0 max-w-[75%]">
         {children}
       <div
         data-touch-open={touchOpen || pickerOpen ? "true" : undefined}

src/components/inbox/reply-quote.tsx

@@ -31,11 +31,20 @@ export function ReplyQuote({
           : "mb-1.5 rounded-md bg-black/20",
       )}
     >
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 overflow-hidden">
         <div className="truncate text-[11px] font-medium text-primary">
           {authorLabel}
         </div>
-        <div className="truncate text-xs text-slate-200/80">{preview}</div>
+        {/* Wrap the preview instead of truncating to a single line.
+         *  `truncate` (white-space: nowrap) forced the quote onto one
+         *  impossibly-wide line and — because the parent flex chain
+         *  lacked `min-w-0` at every step — pushed the entire inbox
+         *  layout wider, shoving the contact sidebar off-screen.
+         *  `break-words` also wraps long URLs that have no whitespace
+         *  to break on. Issue #165. */}
+        <div className="whitespace-pre-wrap break-words text-xs text-slate-200/80">
+          {preview}
+        </div>
       </div>
       {onDismiss && (
         <button