The initial refresh() ran before the mobile layout settled (media queries,
fonts, async highlighting) and under-measured the content, leaving #jumpnav
hidden on long pastes at 375x812 until a resize event. Re-check after a
double rAF, on window load, after 300ms, and via a ResizeObserver on
document.body for late content growth. Editor textarea scroller unchanged.
With wrap on, a logical line occupies several visual rows in the textarea
but the gutter showed one number per logical line, so every number after
the first wrapped line drifted off its text (the paste view fixed this in
#167; the editor gutter did not). Measure the wrapped row count per logical
line with a hidden mirror div sharing the editor's font and wrapping rules,
and render one .gutline block per visual row with the number on the first
row of its logical line. Re-measure on input, wrap toggle and resize.
Verified: gutter scrollHeight == textarea scrollHeight with zero diff at
1400x900 and 375x812, wrap on and off.
Fixed-position Top/Bottom pills appear only when content exceeds 2x
viewport height (window scroll on paste view, textarea scroll on /new).
New static/jump.js drives them; markup added to paste.html and new.html.
The paste gutter was pinned to a fixed 3ch width. With box-sizing:
border-box that leaves only ~19px of content after the 10px+10px side
padding, so 2+ digit line numbers overflow right into the code text
(owner-visible from line 10, worst at 100+).
paste-lines.js now sets the gutter width to calc(Nch + 20px), where N is
the digit count of the highest line number, via CSSOM (CSP forbids
inline style attributes). Numbers were already right-aligned; the column
now matches the width of the biggest number. The width is only written
when it changes, so the resize-observer/renumber loop keeps a stable
fixed point.
- 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
- 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
fen