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

Soften file viewer header meta + add gutter breathing room (PAP-2242)

Browse Source 
- Remove pill chrome from workspace/type/size/line meta row; use
  bulleted plain text so it reads as metadata, not status chips.
- Give line-number gutter a dedicated 16px right pad so numbers stop
  butting up against code.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
DottaPaperclipClaude Opus 4.7
 committed 2026-06-09 21:35:48 +00:00
1 parent 2e26147639
commit ebe6b9723e
1 file changed
+18 -16
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/FileViewerSheet.tsx
+18 -16
View File
@@ -364,7 +364,7 @@ function FileContentViewer({ content, highlightedLine, onLoaded }: FileContentVi
<span
aria-hidden="true"
className={cn(
"sticky left-0 z-10 shrink-0 select-none px-3 text-right text-[var(--paperclip-code-gutter-fg,theme(colors.muted.foreground))] opacity-70",
"sticky left-0 z-10 shrink-0 select-none pl-3 pr-4 text-right text-[var(--paperclip-code-gutter-fg,theme(colors.muted.foreground))] opacity-70",
"bg-[var(--paperclip-code-bg,theme(colors.muted.DEFAULT))]",
isHighlighted &&
"opacity-100 bg-[var(--paperclip-code-highlight-bg,rgba(250,204,21,0.12))] border-l-2 border-[var(--paperclip-code-highlight-border,rgb(234,179,8))]",
@@ -608,28 +608,30 @@ export function FileViewerSheet({
</div>
</div>
{resolvedResource ? (
<div className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
<span
className="inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5"
title={resolvedResource.workspaceLabel}
>
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
<span title={resolvedResource.workspaceLabel}>
From {resolvedResource.workspaceLabel}
</span>
{resolvedResource.previewKind ? (
<span className="inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5 capitalize">
{resolvedResource.previewKind}
</span>
<>
<span aria-hidden="true" className="opacity-50">·</span>
<span className="capitalize">{resolvedResource.previewKind}</span>
</>
) : null}
{formatBytes(resolvedResource.byteSize) ? (
<span className="inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5">
{formatBytes(resolvedResource.byteSize)}
</span>
<>
<span aria-hidden="true" className="opacity-50">·</span>
<span>{formatBytes(resolvedResource.byteSize)}</span>
</>
) : null}
{state?.line ? (
<span className="inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5">
Line {state.line}
{state.column ? `, Col ${state.column}` : ""}
</span>
<>
<span aria-hidden="true" className="opacity-50">·</span>
<span>
Line {state.line}
{state.column ? `, Col ${state.column}` : ""}
</span>
</>
) : null}
</div>
) : null}