From 8dd9bd28a9f28f9f4a73608550b51faf3fcf7a92 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 10 Jul 2026 17:36:51 +1000
Subject: [PATCH] fix(desktop): place diff type badge beside card title, not
 with right-side actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The title span's flex-1 stretched it across the row, pushing the type
badge over to the commit SHA on the right. Match the per-file header
layout instead: the badge sits immediately after the (truncating) file
path, and the SHA/repo link/expand button — or the view toggle in the
expanded dialog — are grouped and pushed right with ml-auto.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/features/messages/ui/DiffMessage.tsx  | 82 ++++++++++---------
 .../messages/ui/DiffMessageExpanded.tsx       |  4 +-
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/desktop/src/features/messages/ui/DiffMessage.tsx b/desktop/src/features/messages/ui/DiffMessage.tsx
index 444f2d1faa..71a3460ce8 100644
--- a/desktop/src/features/messages/ui/DiffMessage.tsx
+++ b/desktop/src/features/messages/ui/DiffMessage.tsx
@@ -57,7 +57,7 @@ export default function DiffMessage({
     >
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border/50 bg-muted/40">
         <FileDiff className="h-4 w-4 shrink-0 text-muted-foreground" />
-        <span className="flex-1 truncate font-mono text-xs text-foreground/80">
+        <span className="min-w-0 truncate font-mono text-xs text-foreground/80">
           {filePath ?? "diff"}
         </span>
         {titleBadge && (
@@ -65,51 +65,53 @@ export default function DiffMessage({
             {titleBadge}
           </span>
         )}
-        {shortSha && (
-          <span className="text-xs text-muted-foreground font-mono">
-            {commitUrl ? (
+        <div className="ml-auto flex items-center gap-2">
+          {shortSha && (
+            <span className="text-xs text-muted-foreground font-mono">
+              {commitUrl ? (
+                <a
+                  className="hover:underline"
+                  href={commitUrl}
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  {shortSha}
+                </a>
+              ) : (
+                shortSha
+              )}
+            </span>
+          )}
+          {safeRepoUrl && !commitUrl && (
+            <span className="text-xs text-muted-foreground">
               <a
                 className="hover:underline"
-                href={commitUrl}
+                href={safeRepoUrl}
                 rel="noreferrer noopener"
                 target="_blank"
               >
-                {shortSha}
+                {getHostname(safeRepoUrl)}
               </a>
-            ) : (
-              shortSha
-            )}
-          </span>
-        )}
-        {safeRepoUrl && !commitUrl && (
-          <span className="text-xs text-muted-foreground">
-            <a
-              className="hover:underline"
-              href={safeRepoUrl}
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              {getHostname(safeRepoUrl)}
-            </a>
-          </span>
-        )}
-        {onExpand && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                aria-label="Expand diff"
-                className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-                onClick={onExpand}
-                size="sm"
-                type="button"
-                variant="ghost"
-              >
-                <Maximize2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Expand diff</TooltipContent>
-          </Tooltip>
-        )}
+            </span>
+          )}
+          {onExpand && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  aria-label="Expand diff"
+                  className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                  onClick={onExpand}
+                  size="sm"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Maximize2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Expand diff</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
       </div>
 
       {description && (
diff --git a/desktop/src/features/messages/ui/DiffMessageExpanded.tsx b/desktop/src/features/messages/ui/DiffMessageExpanded.tsx
index eb30447f72..5c533bb4e5 100644
--- a/desktop/src/features/messages/ui/DiffMessageExpanded.tsx
+++ b/desktop/src/features/messages/ui/DiffMessageExpanded.tsx
@@ -39,7 +39,7 @@ export default function DiffMessageExpanded({
       <DialogContent className="max-w-5xl w-full h-[80vh] flex flex-col p-0 gap-0">
         <DialogHeader className="shrink-0 border-b border-border/50 px-4 py-3 pr-14">
           <div className="flex flex-wrap items-center gap-2">
-            <DialogTitle className="min-w-0 flex-1 truncate font-mono text-sm font-medium">
+            <DialogTitle className="min-w-0 truncate font-mono text-sm font-medium">
               {filePath ?? "Diff Viewer"}
             </DialogTitle>
             {titleBadge && (
@@ -47,7 +47,7 @@ export default function DiffMessageExpanded({
                 {titleBadge}
               </span>
             )}
-            <div className="flex items-center gap-1 rounded-lg border border-border/60 bg-muted/30 p-1">
+            <div className="ml-auto flex items-center gap-1 rounded-lg border border-border/60 bg-muted/30 p-1">
               <Button
                 className="h-7 px-2"
                 onClick={() => {