Repository navigation
Add document width preference toggle for comfortable/wide layouts - #147
Open
claudiunicolaa wants to merge 3 commits into
Open
claudiunicolaa wants to merge 3 commits into
claudiunicolaa wants to merge 3 commits into
Conversation
The rendered document was capped at a fixed ~46.5rem (~744px) column and centered in a 1080px container. Wide content, especially ASCII diagrams in fenced code blocks, was squeezed into that narrow measure and forced to scroll horizontally. Let the document fill most of the available width instead, leaving ~5% gutters on each side: - Scroll container uses `px-[max(1.5rem,5%)]` side padding for the 5% gutters (with a small floor for narrow screens), and the inner container drops its `max-w-[1080px]` cap. - `.review-layout-grid` gives the document column `minmax(0, 1fr)` and `justify-content: stretch`, so it flexes to fill whatever the fixed 18rem review rail leaves; the header toolbar, document content, and rail stay aligned. - Removed the `max-w-[46.5rem]` caps on the header and both PageCard document columns. Because the document now fills the width and is anchored to the left gutter, its left edge no longer moves when the review rail toggles; it simply narrows to make room. The re-centering FLIP animation is therefore inert for this transition, so the layout smoke test now guards the new guarantee: the document stays anchored (no horizontal jump) as the rail appears and disappears. A new content-width smoke test asserts the document covers ~90% of the available width with symmetric ~5% gutters. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BfxFTEM3kkzZx1b7ECbBua
Make the document width a user choice instead of a fixed default, the way
the theme adapts: a header toggle switches between the classic centered
~46.5rem reading column ("comfortable") and the full-width layout ("wide")
that gives ASCII diagrams and other wide content room.
- `document-width.ts`: a small persisted preference store (localStorage key
`roughdraft:document-width`) that reflects the choice as `data-doc-width`
on the document root and exposes a `useDocumentWidth()` hook. Syncs across
windows via the `storage` event; applied at startup in `main.tsx` before
first paint to avoid a flash.
- `DocumentWidthToggle.tsx`: a segmented pill in the document header matching
the existing rich/code toggle, with fold/unfold icons.
- `style.css`: the wide layout stays the default; `:root[data-doc-width=
"comfortable"]` restores the capped, centered column entirely in CSS, so
the header, content, and review rail all follow the preference.
Default is `wide`. Adds unit tests for the preference store and an e2e smoke
test that toggles to the comfortable column, checks it is centered, and
confirms the choice survives a reload.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BfxFTEM3kkzZx1b7ECbBua
Flip the default width preference from "wide" to "comfortable" so a first-time reader gets the classic centered ~46.5rem column; the full-width layout is now opt-in via the header toggle. The choice is still persisted, so anyone who previously selected a width keeps it. Tests that exercised the full-width layout no longer get it from the default, so they now pin it explicitly via a new `seedDocumentWidth` e2e helper: - content-width "fills ~90%…" seeds wide before measuring. - criticmarkup "keeps the document anchored…" seeds wide (left-edge anchoring is a full-width behavior; the comfortable column re-centers instead). - The content-width toggle test now starts from the comfortable default, switches to wide, and confirms the choice survives a reload. - Unit tests assert the new default. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BfxFTEM3kkzZx1b7ECbBua
|
@claude is attempting to deploy a commit to the Lex Team on Vercel. A member of the Team first needs to authorize it. |
This branch has not been deployed
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
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
Adds a user-configurable document width preference that allows readers to switch between a classic centered reading column (the current one, "comfortable" ~46.5rem) and a full-width layout ("wide" ~90% of viewport) that gives wide content like ASCII diagrams room to breathe. The preference is persisted in localStorage and reflected via a
data-doc-widthattribute on the document root for CSS-driven layout switching.Key Changes
New
document-width.tsmodule: Manages the document width preference with localStorage persistence, validation, and a React hook (useDocumentWidth) for consuming components. IncludesinitDocumentWidth()to sync the preference at app startup before rendering to avoid layout flash.New
DocumentWidthToggle.tsxcomponent: A compact toggle button with fold/unfold icons that switches between width modes and is placed in the document toolbar.CSS layout updates (
style.css):1fr(full available width) instead of a fixed46.5remcolumn:root[data-doc-width="comfortable"]selector to restore the centered column when that preference is activepx-8 sm:px-12to responsivepx-[max(1.5rem,5%)]for proper gutters in wide modeComponent updates: Removed hardcoded
max-w-[46.5rem]fromPageCard.tsx(both RichTextEditorSurface and CodeEditorSurface) since width is now controlled by the preference attribute and CSS.E2E test coverage:
content-width.spec.tswith tests for wide layout geometry (verifying ~90% width with ~5% side gutters) and preference toggle persistence across reloadscriticmarkup-review.spec.tsto verify the document stays anchored to the left gutter when the review rail appears/disappears (no horizontal shift), using the wide layout to exercise this behaviorseedDocumentWidth()helper to pre-set the preference in testsTest suite: New
document-width.test.tscovering preference reading, validation, persistence, and initialization.Implementation Details
initDocumentWidth()called inmain.tsxbefore React renders, ensuring the correct width is applied immediately