fix(desktop): place diff type badge beside card title, not with right-side actions

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>
This commit is contained in:
Matt Toohey
2026-07-10 17:36:51 +10:00
parent 0683e35d86
commit 8dd9bd28a9
2 changed files with 44 additions and 42 deletions

View File

@@ -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 && (

View File

@@ -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={() => {