- history/mine table column 'Language' -> 'Type' (data-sort key 'type')
- /api/public and /api/mine rows gain a 'type' field: file extension for
attachment pastes, stored language otherwise (default 'text')
- paste page stats label 'Language' -> 'Type'; summary line uses the same
label; get-paste JSON gains 'type'
- store list queries LEFT JOIN attachments to expose the filename
- table.js sorting accepts the 'type' key
The merged #224 fix covered the details grid but left the summary
pill using humanSize(len(row.Content)), which reads 0 for attachment
pastes (text content is empty). Use the attachment size there too.
- image pastes render the image scaled to fit the viewer box (aspect
ratio preserved, max-height 70vh), no text/code box below it
- link pill moved under the image as a small inline chip
- /raw serves image attachment bytes as an image instead of empty text
- view details size reports the actual attachment file size
The details pill drew its own 1px border with a 10px radius inside .float, which draws the real border at 20px radius and clips with overflow:hidden. The parent's looser curve clipped the pill's tighter corner curve, making the border appear thinner/cut at the corners, in both collapsed and expanded states. Drop the pill's own border/radius so .float is the single border surface, matching the other pills on the page.
Ref #222
paste-lines.js rebuilt the codebody with innerHTML but relied on the
server-side '\n' delimiters disappearing between the per-line blocks.
Under white-space: pre any whitespace-only text node that survives
(cached HTML, template drift) renders as a phantom row and drifts the
gutter numbers off their lines. splitLines() now strips whitespace-only
text nodes after rebuilding, keeping renumber() geometry intact.
/mine rows render 7 cells (ID + delete button) but the colgroup and
thead only declared 6 columns, so under table-layout:fixed the delete
button cell overlapped the ID column at narrower widths. Add a
col-del column + empty header th to match the row cells.
QA of the #167 follow-up found two defects:
1) renumber() referenced an undefined 'tops' variable in the rAF
re-verification pass, so any wrap toggle that reflowed a partially
filled last visual row left stale (non-idempotent) numbering.
2) rows were derived from per-span heights while the code column also
renders newline text nodes between .codeline blocks, so the gutter
could drift from the code column's real visual rows.
renumber() now measures each .codeline's actual offsetTop and places
every number on the visual row its line starts on (a line wrapping to N
rows gets its number on the first of them), pads filler rows in between,
and self-corrects one frame later if reflow moves any line. Wrap-OFF
path stays unchanged ('1
2
3
4'). Verified in headless Chromium:
gutter/code row alignment exact at 1200px and 640px, toggle cycles
stable, no horizontal scroll, no CSP console errors; go build/test pass.
Rebuild renumber() so gutter numbers are placed by measured geometry:
each .gutline block is one visual row and each number is assigned to the
row whose top matches its .codeline's top, instead of counting rows per
line. This keeps numbers aligned with wrapped line starts regardless of
how many visual rows a line occupies. Wrap OFF path unchanged.
paste-lines.js joined .codeline spans with '\n' text nodes that pre-wrap
renders as extra line boxes, and renumber() counted per-line span heights
(rounding) instead of real geometry, so gutter numbers drifted off their
line starts on wrapped lines. Fix: join spans with '' (blocks need no
newline text), and build one .gutline per visual row measured from the
code body's real height, placing each number at the visual row whose top
matches its .codeline's measured top. Wrap OFF path unchanged. Mobile
font-size rule added so gutter row pitch matches code rows at 375x812.
topbar.js binds click handlers to every .dark-toggle, including the
settings one; settings.js then also wired a delegation that re-clicked
the topbar button, so each click flipped dark mode twice (net no-op).
Mark buttons as wired in topbar.js and only add a fallback handler in
settings.js when topbar.js did not run.
CSS: center the toggle horizontally under the Settings title with auto
margins, matching .settings-body padding.
Closes#197
- splitLines(): join .codeline blocks with "" not "\n" — newline text
nodes under pre-wrap rendered an extra line box per logical line, so
every gutter number drifted one row per line
- renumber(): geometry-driven placement — one gutline per visual row of
the code body, each number assigned to the row matching its line's
measured offsetTop; verified second pass re-runs if a partially-filled
last wrapped row reflows after the gutter rebuild
- app.css: mobile media query gives .code .gutter the same 13px font as
.code so gutter rows and code rows share one line box at 375px
Verified in local build with headless chromium (long unbroken token on
line 5, wrap ON): all numbers align with line starts, no misalignment,
no horizontal scroll at 1400x900 and 375x812.
Split the paste codebody into per-line block spans (paste-lines.js) and
rebuild the gutter from each line's wrapped height so numbers count
visual rows, not logical lines. Pinned the gutter width (flex 0 0 auto,
3ch) so its row count no longer feeds back into the code column width.
ResizeObserver renumbers on wrap toggle / resize; wrap-off behavior is
unchanged (one number per newline).
fen