Jannik/PaperClipAI
1
0 Fork 0
mirror of https://github.com/paperclipai/paperclip.git synced 2026-10-25 17:45:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): stop file-viewer chips inflating line height on iOS Safari

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
DottaandClaude Opus 4.8 committed 2026-06-16 10:02:03 +00:00
1 parent 6072eade58
commit f8a9fd481a
2 files changed
+2 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/src/components/ArtifactFileChip.tsx
+1 -1
View File
@@ -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,
);
ui/src/components/WorkspaceFileLink.tsx
+1 -1
View File
@@ -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}