mirror of
https://github.com/block/buzz.git
synced 2026-11-11 20:01:09 +00:00
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:
@@ -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 && (
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
Reference in New Issue
Block a user