Make the editor's section list readable at nine sections - #375
Merged
Conversation
Deepening the templates from four sections to nine turned two small annoyances into an unusable list. Measured in Chrome on kiln-coffee: seven of the nine labels were clipped to "Roasted t..." and "Light eno...", and two of the rows were spacers labelled "Section 4" and "Section 8" whose Content tab offered an eyebrow, a heading, a body, a button and an image - five fields a spacer does not have. The labels were starved because the row's hover controls are opacity-0 rather than absent, so four buttons reserved roughly a hundred pixels of a two-hundred-and-twenty-four pixel panel while invisible. They are now positioned out of the flow, over the right edge of the row, and the label takes the whole width across two lines. Zero of nine clip. A spacer is named as one, dimmed and italic, and selecting it explains what it does and points at the height control on the Layout tab rather than presenting fields that go nowhere. Verified that lifting the controls out of the flow did not break them: elementFromPoint at the button's centre returns the button, and move up, duplicate and undo all still work on the list. Suite 369 passed; the four new tests fail on main.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Deepening the templates in #374 was the right change, but it broke something I built for four-section templates. Measured in Chrome on
kiln-coffee:The list read:
Why the labels were starved
Not the panel width. The row's hover controls are
opacity-0, which still occupies layout — four buttons reserving roughly 100px of a 224px panel while invisible. My first attempt made it worse by addingflex-shrink-0to them, which pinned that width instead of letting it collapse.They are now
absolute right-1 top-1over the right edge of the row, with the row as the containing block, so the label gets the full width across two lines.Spacers
A spacer draws nothing. Labelling it "Section 4" and then offering an eyebrow, heading, body, CTA and image URL invites you to fill in five fields that do nothing. It now reads
Spacer · 700px, dimmed and italic, and selecting it says what it is for and points at the height control on the Layout tab — the one thing it actually has.Verified the controls still work
Lifting them out of the flow could easily have made them unclickable, so I checked rather than assumed:
Also checked at 390×844: full headings, spacer distinct, list scrolls within its cap.
Four new tests in
appAccessibility.test.ts, all failing onmain. Suite 369 passed.