From f8a9fd481a42ed5a69a000ba5d0ccdddfae393b5 Mon Sep 17 00:00:00 2001 From: Dotta Date: Wed, 10 Jun 2026 02:30:13 +0000 Subject: [PATCH] fix(ui): stop file-viewer chips inflating line height on iOS Safari WebKit synthesizes an inline-flex box's baseline from its bottom edge when align-items removes baseline participation (items-center), so the chip sat entirely above the text baseline and inflated the surrounding line height on mobile Safari. Chrome uses the inner content baseline, so desktop looked fine. Switch align-baseline -> align-middle on both the WorkspaceFileLink and ArtifactFileChip so alignment no longer depends on baseline synthesis and renders consistently across engines. Co-Authored-By: Claude Opus 4.8 --- ui/src/components/ArtifactFileChip.tsx | 2 +- ui/src/components/WorkspaceFileLink.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/ArtifactFileChip.tsx b/ui/src/components/ArtifactFileChip.tsx index 49f2987c7c1..9559306c881 100644 --- a/ui/src/components/ArtifactFileChip.tsx +++ b/ui/src/components/ArtifactFileChip.tsx @@ -43,7 +43,7 @@ export function ArtifactFileChip({ : `Workspace file ${workspaceFileRef.displayPath}${lineSuffix}`); const classNames = cn( - "paperclip-artifact-file-chip inline-flex items-center gap-1 rounded-sm border border-border bg-muted/60 px-1.5 py-0.5 font-mono text-xs leading-tight text-foreground/90 align-baseline no-underline hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", + "paperclip-artifact-file-chip inline-flex items-center gap-1 rounded-sm border border-border bg-muted/60 px-1.5 py-0.5 font-mono text-xs leading-tight text-foreground/90 align-middle no-underline hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", canOpen ? "cursor-pointer" : null, className, ); diff --git a/ui/src/components/WorkspaceFileLink.tsx b/ui/src/components/WorkspaceFileLink.tsx index 0075a55973c..522b1580bb9 100644 --- a/ui/src/components/WorkspaceFileLink.tsx +++ b/ui/src/components/WorkspaceFileLink.tsx @@ -83,7 +83,7 @@ export function WorkspaceFileLink({ aria-label={ariaLabel} title={tooltip} className={cn( - "paperclip-workspace-file-link inline-flex items-center gap-1 rounded-sm border border-border bg-muted/60 px-1.5 py-0.5 font-mono text-xs leading-tight text-foreground/90 align-baseline no-underline hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", + "paperclip-workspace-file-link inline-flex items-center gap-1 rounded-sm border border-border bg-muted/60 px-1.5 py-0.5 font-mono text-xs leading-tight text-foreground/90 align-middle no-underline hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", className, )} onClick={handleClick}