feat(web): rework page editor typography and alignment (0198) - #169
Merged
Conversation
…ignment Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the page document's ad-hoc, three-source typography with one rhythm system in .page-prose (apps/web globals.css): - Symmetric horizontal padding centres the measure (was 56px left / 28px right off-centre); the left half stays the drag-handle gutter. - One em-based flow unit between blocks; space-precedes heading margins; consistent one-step list indent. - To-do lists reset the inherited list indent (the +24px bug from the equal-specificity .page-prose ul / taskList pl-0 tie) and size checkbox+gap to one indent step, so to-do text shares the bullet text edge. The checkbox is centred on the first line with the lh unit, not a magic pixel offset. - Blockquote text aligns to the list-content edge. - Title bumped to 40px so it outranks the 30px H1. Verified live: paragraph/bullet/ordered/to-do/blockquote text all share one left edge; column centred; checkbox offset 0px. Scoped to the page surface, so canvas/compact editor surfaces are unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
🖼️ UI changes in this PRNo visual differences detected in the changed UI. |
Contributor
|
Preview removed for PR #169. |
crs48
added a commit
that referenced
this pull request
Jun 18, 2026
## What Backfills the changelog so it reflects what's live on `main`. The per-PR fragment system (exploration 0197) was current through PR #163 (PR #178 backfilled #151/#153/#156/#157/#160/#163), but the recent **0198/0199 batch** and a couple of stragglers shipped without entries. This adds 7 fragments, with prose lifted from each PR's own `## Changelog` block where present. | PR | Entry | Tags | |---|---|---| | #143 | AI chat that knows your workspace | `ai` | | #167 | Linear-grade Tasks | `tasks` `app` | | #169 | Cleaner page editor typography | `editor` | | #170 | Bring your Slack data into xNet | `plugins` `platform` | | #171 | Smoother, more consistent motion | `app` | | #173 | Airtable-grade database grids | `app` | | #174 | A redesigned chat & channels experience | `app` | ## Deliberately excluded - **In-editor AI (#154 / #158)** — shipped the transform engine + diff/approval logic, but both PRs state the `/ai` UI wiring into the running app is **deferred**, so it isn't user-visible yet. An entry would overclaim. - **Slack (#170)** — entry scoped to the migration connector + compatibility layer (genuinely live); avoids claiming the webhook/slash-command hub endpoints work, since they're generic-over-an-injected-sink and not mounted in a running server yet. - Pure infra/ops/docs PRs (cloud M1/M2, CI, runbooks) — not user-facing. ## Verification - `validate-changelog.ts` → **26 fragments valid** (19 existing + 7 new) - `prettier --check` on all new files → clean - Newest-first ordering confirmed — the 7 entries slot in at the top ## Changelog <!-- This PR only adds changelog fragments for already-merged work; it ships no user-facing change of its own. --> 🤖 Generated with [Claude Code](https://claude.com/claude-code)
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.
Summary
Reworks the page document editor's typography to be clean and aligned, in line with Notion/Obsidian — the implementation of exploration 0198.
Before, the page's spacing came from three uncoordinated layers stacking on
.ProseMirror(editor.cssbase,globals.css.page-prose, and inline Tailwind gutter utilities), with equal-specificity rules fighting one another. Rendering a kitchen-sink page and measuring it showed four different left edges at the same nesting level (paragraph 56px, blockquote 76px, bullet/ordered 80px, to-do 104px), an off-center text column (56px left / 28px right), asymmetric vertical rhythm, and a title/H1 with no hierarchy (36/700 vs 30/700).This consolidates all page typography into one rhythm system in
apps/web/src/styles/globals.css.page-prose, driven by em-based--prose-*tokens.What changed
.ProseMirrorpadding is now32px / 32px(waspl-8/pr-1), centering the measure. The left half still serves as the drag-handle gutter, so noDragHandlechange was needed.0.75emflow unit between blocks (lobotomized owl), "space precedes" heading margins, and a consistent one-step list indent.+24pxbug from the.page-prose ul/taskList pl-0specificity tie) and sizecheckbox + gapto one indent step, so to-do text shares the bullet text edge. The checkbox is centered on the first line with thelhunit, not a magic pixel offset.Scoped to the page surface (
.page-prose), so canvas-inline / compact editor surfaces are untouched. No!important; wins via specificity.Verified live (measured in the running app)
.ProseMirrorpadding L / Rtypecheckgreen (turbo 85/85),eslintclean, no console errors.Changelog
Notes / deferred
globals.css/PageView.tsx) rather than a new editor-packageprose.css, becauseeditor.cssonly reaches the app via the builtdist/react.cssand editing it would also move shared canvas/compact surfaces. Extracting a reusable:where()-scopedprose.cssand reconciling the base square-checkbox CSS are deferred.scripts/visualsbaseline are deferred; the visuals pipeline still auto-captures the changed page surface per PR.🤖 Generated with Claude Code