draft editor: writing-surface polish pass#84
Merged
jorgefilipecosta merged 6 commits intotrunkfrom May 6, 2026
Merged
Conversation
…height Title-input was inheriting body 13px and computing to 26px (2em), which made it visually smaller than the editor's own H1 (34px) — the document title was outranked by its own headings. Switched to an absolute 36px so the title reads as the largest thing on the page. CodeMirror's baseTheme sets line-height: 1.4 directly on .cm-content, which beats the 1.7 we had on .cm-editor via deeper specificity. Set 1.65 on .cm-line itself so it actually applies to body prose. Heading scale tuned (H1 1.85em, H2 1.4em, H3 1.18em, H4 1.05em) with more breathing above each — the previous scale ran wide on H1/H2 and left H4 indistinguishable from body.
The titlebar competes with the page on a writing surface, so dim every non-action element a notch. Back button drops to 12px / weight 500 with a muted opacity that lifts on hover; the action-menu trigger fades to 0.7 default and lifts when hovered or the menu is open. Save status switches to a bullet-only indicator when "saved" — writers don't need confirmation-on-success, the absence of "Saving…" / "Unsaved" is itself the all-clear. The dot keeps a visual anchor in the slot so the row doesn't visibly empty out. "Unsaved changes" tightened to "Unsaved" to match the same compactness; word-count chip drops to 11.5px with a touch more letterspacing.
Drops the trailing "Project" label so the back control matches the visual register of the other titlebar icon buttons (undo/redo, action menu) — square 28px footprint, 16px arrow glyph. Adds aria-label and title so screen readers and the hover tooltip still convey "Back to project".
The button text is now just `←` and conveys "Back to project" via aria-label. Asserting both keeps the spec honest about what's visible (the glyph) and what's announced (the accessible name).
Removes the horizontal-rule button from the formatting toolbar and adds
a Divider entry to the / commands menu — block insertion lives in the
same place as the other one-shot block actions (image, quote, h1-4),
and the toolbar regains a slot of horizontal room.
The toolbar can still run wider than the available titlebar space when
both side panels are open and a selection is active, painting the
formatting buttons over the word-count chip. A `@container` query on
.main-top-draft-editor (container-name: draft-titlebar) hides the chip
in selection mode only when the titlebar drops below 720px — wide
viewports keep both visible. Document-mode chip ("92 words · ~1 min")
is never hidden; that's the reading-progress signal worth preserving.
Tightens the toolbar separator margins from 4px to 2px so even when
the chip is shown alongside, the toolbar has more breathing room.
Width sweep showed the prior 720px guard was hiding the chip far earlier than necessary. Empirically the toolbar's last button reaches the chip only at content-box widths around 600px — keeping the threshold above that just clipped the chip on plenty of viewports where it would have fit fine. Pinned to 600px (content-box, the value @container measures): chip stays visible at 603px (2px clearance) and hides only when the buttons actually touch the chip. Container query measures content-box, not border-box, so the number's a chunk smaller than the perceived viewport edge but corresponds to the real collision point.
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.
Polish pass on the draft editor to make it read like a deliberate writing app rather than a chat surface with a CodeMirror dropped in.
Typography
line-height: 1.4on.cm-contentdirectly, which beats the 1.7 we had on.cm-editorvia deeper specificity. Re-asserted 1.65 on.cm-lineitself — that's the only place that survives the override.Quieter titlebar chrome
← Project→ square 28px icon-only←witharia-label="Back to project". Matches the visual register of undo/redo and the action menu instead of standing apart as a labelled button.Slash menu / toolbar housekeeping
/commands menu next to image/quote/h1–h4 — block insertion is in one place now and the toolbar regains a slot of horizontal room.Toolbar/word-count overlap on narrow titlebars
When both side panels are open and a selection is active, the formatting toolbar could run wider than the available titlebar room and paint over the word-count chip. A
@containerquery on.main-top-draft-editor(container-name: draft-titlebar) hides the chip in selection mode only when the titlebar's content-box drops below 600px — the empirical width sweep where the toolbar's last button starts touching the chip's left edge. Document-mode chip ("92 words · ~1 min") is never hidden; that's the reading-progress signal worth preserving.The 600px threshold was tuned by sweeping titlebar widths and recording clearance:
So the chip stays visible all the way down to actual collision rather than firing at a generous guess.
Test plan
tests/e2e/draft-editor.spec.ts(back-button assertion updated for icon label)tests/e2e/draft-slash-menu.spec.ts(newdivideraction covered)tests/e2e/formatting-toolbar.spec.ts(HR removal, all tests still pass)