Polish the paste page: one instrument, quieter chrome - #16
Merged
Merged
Conversation
Pressing it changed nothing about it. The result appeared as a line of text two elements to the right — the one place you are not looking at the moment you press a button. The button reports it now: mint for copied, amber for refused, with the note beside it cut down to the part worth reading — which formats went, or what to do when the browser blocks it. The width is fixed so the row does not jump when the label changes, and it resets after a few seconds. A press can also be felt rather than assumed: an inset highlight, a lift on hover, a 1px drop on active. Dropped under prefers-reduced-motion. Contrast on all three states is AAA (7.6, 9.4, 9.8). The target is 44px under a coarse pointer, and in the single-column layout the button takes the full width its fields already have rather than sitting at 200px beside them. All three paths exercised in a browser: the primary clipboard write, the rich-text fallback, and both failing — which also focuses and selects the HTML for a manual copy.
Two of them, both the browser's default: a pale slab across the foot of the rendered block and another down the side of the HTML box, on a page that is otherwise dark and quiet. jsray.css already answers this for a class-rendered block, with an 8px bar coloured from the palette — but it does it through ::-webkit-scrollbar, and a pseudo-element cannot be written inline. So a portable block never had it, at the destination either. scrollbar-width and scrollbar-color are real properties, say the same thing, and travel with the block; where a browser does not know them it keeps the scrollbar it would have had anyway. The page's own textareas get both spellings, since the ::-webkit- rules still cover the versions that predate the standard ones. Also: assigning to a textarea's value leaves the caret at the end and the browser scrolls there, so the HTML box opened on the middle of the markup every time a setting changed. It starts at the start now.
They are a before and an after of the same thing, and they ended in different places. The editor stopped at its 300px minimum while the preview ran on to whatever the block needed — 30px lower — so the pair read as two boxes that happened to be next to each other. Stretching the row makes them end together. The preview also inset its contents by 14px against the editor's 10px, which put the rendered block 5px further in than the code it is a rendering of; both are 11px now, so a line of code sits directly opposite the line it became. Only while they are side by side: stacked on a narrow screen there is nothing to align to, and forcing a shared height there would spend vertical space a phone does not have. Measured at eight widths — equal height and a common baseline above 900px, an even inset at all of them.
Stretching the surface to the row's height put every pixel the row was taller than the block into one gap along the bottom — 70px against 10 on the other three sides, which is what you notice. It hugs the block now, with 10px all round and no minimum height; a minimum is the same gap under another name whenever the block is shorter than it. That trades away the shared bottom edge, but only where the editor is being held open by its own 300px minimum: at nine lines both panes are 321px and at twenty-six both are 654px, ending together in each case. It is one line of code that separates them, by 182px, and the minimum is there so the box is still worth typing in.
They were two bordered boxes with a gap down the middle, and the last two changes were both attempts to make two separate things look related — first by forcing a shared height, then by evening out the padding the forcing had unbalanced. One card with a hairline down the middle removes the problem instead of managing it. The halves are grid tracks, so they are equal by construction: 359px each at nine lines, 777 at thirty, 336 at one — where the old arrangement had them 182px apart. Neither half draws an edge any more; the labels are a strip along the top of each, ending on the same line. Stacked below 860px the rule moves from the side to the top, which is the only thing that changes. The editor grows with the row rather than scrolling inside a fixed box, so the resize handle is gone with nothing lost — at thirty lines the textarea is 741px and still not scrolling. Typing on the left still shows on the right as you type; checked by typing into it rather than by reading the listener back.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Five changes to the page, from your notes on it.
The editor and the preview are one card
They were two bordered boxes with a gap down the middle, and two of
these commits are attempts to make two separate things look related —
first by forcing a shared height, then by evening out the padding the
forcing had unbalanced. One card with a hairline down the middle
removes the problem rather than managing it.
The halves are grid tracks, so they are equal by construction: 359px
each at nine lines, 777 at thirty, 336 at one — where the old
arrangement had them 182px apart at one line. Neither half draws an
edge; the labels are a strip along the top of each, ending on the same
line. Stacked below 860px the rule moves from the side to the top.
The editor grows with the row instead of scrolling inside a fixed box,
so the resize handle is gone with nothing lost — at thirty lines the
textarea is 741px and still not scrolling.
The scrollbars
Two of them, both the browser's default: a pale slab across the foot of
the rendered block and another down the side of the HTML box.
jsray.cssalready answers this for a class-rendered block, but it doesit through
::-webkit-scrollbar— a pseudo-element, which cannot bewritten inline. So a portable block never had it, at the destination
either.
scrollbar-widthandscrollbar-colorare real properties, saythe same thing, and travel with the block.
The copy button
Pressing it changed nothing about it; the result appeared two elements
to the right. It reports on itself now — mint for copied, amber for
refused — with the note beside it cut to the part worth reading. Fixed
width so the row does not jump, AAA contrast on all three states, and
the press animation drops under
prefers-reduced-motion.Also
Assigning to a textarea's value leaves the caret at the end and the
browser scrolls there, so the HTML box opened on the middle of the
markup every time a setting changed.
Verification
164 tests. Measured at seven widths from 375 to 1440: the divider
switches sides at the breakpoint, the two halves stay equal wherever
they are side by side, and nothing scrolls sideways. All three copy
paths exercised in a browser, and the live update checked by typing
into the editor rather than by reading the listener back.