feat(desktop): content max-width primitive + Help reading cap (D1)#184
Merged
Conversation
Phase D0 of the Tauri desktop UI/UX remediation — the scoping hook + audit catalog, no visual change. - services/tauriRuntime.ts: getDesktopOs() (UA-based) + applyDesktopRuntimeFlags() which tags document.body with `is-desktop` + `data-os` (windows/macos/linux). Idempotent; no-op on the web. - App.tsx: call applyDesktopRuntimeFlags() once on mount. - index.css: scaffold the `.is-desktop` CSS layer (empty placeholder) so every desktop-specific override is scoped and the PWA stays untouched. - docs/DESKTOP-UI-AUDIT.md: code-derived finding catalog (C-1…C-10) + the screenshot-matrix template for the human visual pass that grounds D1–D4. Verified: typecheck, lint (0 warnings), 11 tauriRuntime tests (new getDesktopOs + applyDesktopRuntimeFlags coverage). Web build unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the PageContainer/.view-shell width primitive: content-light views (Dashboard, Settings, Help, Character, World, Export) centre at the desktop work-width (--width-content: 72rem) inside the Tauri WebView (body.is-desktop) and stay full-width on the PWA. Editor / Plot Board / Mind Map keep their own width and are intentionally not wrapped. Cap HelpView long-form prose to the 65ch reading measure (prose max-w-[var(--sc-prose-measure)]) — a readability win on web + desktop. Resolves C-1/C-2 and the width half of C-3 in docs/DESKTOP-UI-AUDIT.md. Adds PageContainer unit test (4) + Storybook story; typecheck/lint/token-audit green; 40 touched-view tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
codeant-ai
Bot
added
the
size:L
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
… feat/desktop-content-width
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:L
Owner
Author
|
@CodeAnt-AI review |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
…ut survives (CodeAnt #184) ExportViewUI's root is a full-height grid (h-full + inner overflow-y-auto columns), but the new width-capping PageContainer wrapper only set w-full, collapsing the height chain. Pass className="h-full" so the contract is preserved. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Owner
Author
|
@CodeAnt-AI review |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
1 similar comment
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:L
Sequence DiagramThis PR introduces a shared page container that caps desktop content width for wrapped views and adds a reading-width cap to Help articles while keeping the PWA full-width. sequenceDiagram
participant User
participant App
participant PageContainer
participant Styles
User->>App: Open Help view
App->>App: Detect desktop shell and tag body as desktop
App->>PageContainer: Render HelpView UI inside page container
Styles-->>PageContainer: Apply desktop content max width and centering
App->>App: Render help article with prose reading width cap
PageContainer-->>User: Show centered help content with limited line length
Generated by CodeAnt AI |
…width # Conflicts: # App.tsx # docs/DESKTOP-UI-AUDIT.md # graphify-out/GRAPH_REPORT.md # index.css # tests/unit/tauriRuntime.test.ts
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
removed
the
size:L
codeant-ai
Bot
added
the
size:L
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.
User description
Phase D1 — Critical & high-impact quick wins
Stacked on D0 (#183, base
feat/desktop-ui-foundation). Part of the Tauri Desktop UI/UX remediation. CodeAnt review is deferred to the combined final pass over all open PRs perdocs/CODEANT-LOOP-RUNBOOK.md.What
components/ui/PageContainer.tsxrenders.view-shell w-full. The cap lives in CSS (index.css:body.is-desktop .view-shell { max-width: var(--width-content); margin-inline: auto },--width-content: 72rem), so it only applies inside the Tauri WebView (body.is-desktop). The PWA stays full-width/byte-equivalent.prose max-w-none→prose max-w-[var(--sc-prose-measure)](65ch reading cap) — a readability win on web + desktop.Audit catalog
Resolves C-1, C-2, and the width half of C-3 in
docs/DESKTOP-UI-AUDIT.md. Fluid-type tuning (rest of C-3) is deferred to D2.Tests / gates
tests/unit/PageContainer.test.tsx(4) +stories/PageContainer.stories.tsx.typecheck,lint,token:audit(160 ≤ 165 baseline — no new violations), 40 touched-view tests.Scope guarantees
dark:prefix; new--width-contenttoken only. PWA DOM unchanged (wrapper is an inertdivon the web; the cap is.is-desktop-scoped).🤖 Generated with Claude Code
CodeAnt-AI Description
Center key desktop views and cap Help article width
What Changed
Impact
✅ Cleaner desktop reading layout✅ Less wide, harder-to-scan help pages✅ Same full-width web experience💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.