From 7661fae4b3865960d707c09d032f10f35b0e6bca Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sat, 7 Mar 2026 19:55:32 -0600
Subject: [PATCH] Fix inbox row irregular heights on mobile from unread badge

- Give unread dot container fixed h-5 so rows are consistent height
  regardless of badge presence
- Use flex-wrap on mobile so title gets its own line with line-clamp-2
- On sm+ screens, keep single-line truncated layout
- Move timestamp to ml-auto with sm:order-last for clean wrapping

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/pages/Inbox.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 2a1e3917..ff72947e 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -898,9 +898,9 @@ export function Inbox() {
                 return (
                   <div
                     key={issue.id}
-                    className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
+                    className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
                   >
-                    <span className="flex w-4 shrink-0 justify-center">
+                    <span className="flex h-5 w-4 shrink-0 items-center justify-center">
                       {(isUnread || isFading) && (
                         <button
                           type="button"
@@ -922,19 +922,21 @@ export function Inbox() {
                     </span>
                     <Link
                       to={`/issues/${issue.identifier ?? issue.id}`}
-                      className="flex flex-1 min-w-0 cursor-pointer items-center gap-3 no-underline text-inherit"
+                      className="flex flex-1 min-w-0 cursor-pointer flex-wrap items-center gap-x-3 gap-y-0.5 no-underline text-inherit sm:flex-nowrap"
                     >
                       <PriorityIcon priority={issue.priority} />
                       <StatusIcon status={issue.status} />
                       <span className="text-xs font-mono text-muted-foreground">
                         {issue.identifier ?? issue.id.slice(0, 8)}
                       </span>
-                      <span className="flex-1 truncate text-sm">{issue.title}</span>
-                      <span className="shrink-0 text-xs text-muted-foreground">
+                      <span className="ml-auto shrink-0 text-xs text-muted-foreground sm:order-last">
                         {issue.lastExternalCommentAt
                           ? `commented ${timeAgo(issue.lastExternalCommentAt)}`
                           : `updated ${timeAgo(issue.updatedAt)}`}
                       </span>
+                      <span className="w-full line-clamp-2 text-sm sm:w-0 sm:flex-1 sm:line-clamp-none sm:truncate">
+                        {issue.title}
+                      </span>
                     </Link>
                   </div>
                 );