ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-18 11:40:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): improve diff modal layout and readability

Browse source 
- Make modal much wider (90vw) to show full document content
- Use monospace font in diff area for better readability
- Enable word-wrap with pre-wrap so long lines wrap cleanly
  without breaking line number gutters
- Move revision selectors into a single row with colored
  Old/New badges instead of stacked Left:/Right: labels

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-06 08:17:06 -05:00
parent 13ada98e78
commit 93e8e6447d
1 changed files with 56 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

101
ui/src/components/DocumentDiffModal.tsx
View file

@ -72,49 +72,51 @@ export function DocumentDiffModal({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl max-h-[85vh] overflow-hidden flex flex-col"> <DialogContent className="max-w-[90vw] w-full max-h-[85vh] overflow-hidden flex flex-col">
<DialogHeader> <div className="flex items-center justify-between gap-4">
<DialogTitle> <DialogHeader className="shrink-0">
Diff — <span className="font-mono text-sm">{documentKey}</span> <DialogTitle>
</DialogTitle> Diff — <span className="font-mono text-sm">{documentKey}</span>
</DialogHeader> </DialogTitle>
</DialogHeader>
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-4 shrink-0">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2">
<span className="text-xs text-muted-foreground shrink-0">Left:</span> <span className="rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-red-400">Old</span>
<Select <Select
value={effectiveLeftId ?? ""} value={effectiveLeftId ?? ""}
onValueChange={(value) => setLeftRevisionId(value)} onValueChange={(value) => setLeftRevisionId(value)}
> >
<SelectTrigger className="h-8 w-56 text-xs"> <SelectTrigger className="h-7 w-60 text-xs border-border/60">
<SelectValue placeholder="Select revision" /> <SelectValue placeholder="Select revision" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{sortedRevisions.map((revision) => ( {sortedRevisions.map((revision) => (
<SelectItem key={revision.id} value={revision.id} className="text-xs"> <SelectItem key={revision.id} value={revision.id} className="text-xs">
{getRevisionLabel(revision)} {getRevisionLabel(revision)}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2">
<span className="text-xs text-muted-foreground shrink-0">Right:</span> <span className="rounded-full border border-green-500/30 bg-green-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-green-400">New</span>
<Select <Select
value={effectiveRightId ?? ""} value={effectiveRightId ?? ""}
onValueChange={(value) => setRightRevisionId(value)} onValueChange={(value) => setRightRevisionId(value)}
> >
<SelectTrigger className="h-8 w-56 text-xs"> <SelectTrigger className="h-7 w-60 text-xs border-border/60">
<SelectValue placeholder="Select revision" /> <SelectValue placeholder="Select revision" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{sortedRevisions.map((revision) => ( {sortedRevisions.map((revision) => (
<SelectItem key={revision.id} value={revision.id} className="text-xs"> <SelectItem key={revision.id} value={revision.id} className="text-xs">
{getRevisionLabel(revision)} {getRevisionLabel(revision)}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div>
</div> </div>
</div> </div>
@ -155,9 +157,18 @@ export function DocumentDiffModal({
}, },
}, },
contentText: { contentText: {
fontFamily: "inherit", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
fontSize: "13px", fontSize: "12px",
lineHeight: "1.6", lineHeight: "1.5",
wordBreak: "break-word" as const,
whiteSpace: "pre-wrap" as const,
},
gutter: {
minWidth: "40px",
whiteSpace: "nowrap" as const,
},
line: {
wordBreak: "break-word" as const,
}, },
}} }}
/> />