TeamAI/Kagaku.UI
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(tokens): widen the page shell to 90rem for wide-desktop apps #4

Merged
bjoern merged 1 commit from feat/wider-shell into main 2026-07-25 09:04:55 +02:00
Conversation 2 Commits 1 Files changed 1 +1 -1
scarlet commented 2026-07-25 09:04:42 +02:00
Member
Copy link

What

Bumps --shell-max-width from 76rem to 90rem (1216px → 1440px).

Why

The token's own comment declares it "the shared maximum width for every page shell" — but 76rem was sized for settings prose, not for a desktop-first manga workspace where page grids, region tables, and side-by-side comparisons want room. 90rem fills a standard wide display while keeping line lengths sane inside cards.

One-line change; every consumer already sitting on var(--shell-max-width) picks the new width up for free. Orihon's follow-up PR moves all its page shells onto the token so navigation never causes a width jump.

🤖 Generated with Claude Code

## What Bumps `--shell-max-width` from `76rem` to `90rem` (1216px → 1440px). ## Why The token's own comment declares it "the shared maximum width for every page shell" — but 76rem was sized for settings prose, not for a desktop-first manga workspace where page grids, region tables, and side-by-side comparisons want room. 90rem fills a standard wide display while keeping line lengths sane inside cards. One-line change; every consumer already sitting on `var(--shell-max-width)` picks the new width up for free. Orihon's follow-up PR moves all its page shells onto the token so navigation never causes a width jump. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
feat(tokens): widen the page shell to 90rem for wide-desktop apps
All checks were successful
CI / build (pull_request) Successful in 9s
Details
CI / test (pull_request) Successful in 15s
Details
195479dc4b 
The shell cap was 76rem — comfortable for settings prose, cramped for a
desktop-first manga workspace where side-by-side page grids and region
tables want room. 90rem (1440px) fills a standard wide display without
stretching lines past readability, and every consumer that already sits
on var(--shell-max-width) picks it up for free.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
bjoern merged commit 86d8b22d1b into main 2026-07-25 09:04:55 +02:00
bjoern deleted branch feat/wider-shell 2026-07-25 09:04:55 +02:00
forgejo-actions commented 2026-07-25 09:05:10 +02:00
Copy link

Summary

Summary
Generated on: 07/25/2026 - 07:05:09
Coverage date: 07/25/2026 - 07:05:07
Parser: Cobertura
Assemblies: 1
Classes: 53
Files: 53
Line coverage: 94.8% (1034 of 1090)
Covered lines: 1034
Uncovered lines: 56
Coverable lines: 1090
Total lines: 2902
Branch coverage: 87.9% (524 of 596)
Covered branches: 524
Total branches: 596
Method coverage: Feature is only available for sponsors

Coverage

Kagaku.UI - 94.8%
Name Line Branch
Kagaku.UI 94.8% 87.9%
Kagaku.UI.Badge 100% 100%
Kagaku.UI.Breadcrumb 100%
Kagaku.UI.BreadcrumbItem 100% 100%
Kagaku.UI.Button 100% 100%
Kagaku.UI.Card 100% 100%
Kagaku.UI.Combobox`1 93.7% 84.7%
Kagaku.UI.ConfirmDialog 100%
Kagaku.UI.CssClassExtensions 100%
Kagaku.UI.DebouncedSearchField 100% 88.8%
Kagaku.UI.Disclosure 100% 100%
Kagaku.UI.DocumentTitle 76.9% 100%
Kagaku.UI.DragReorderList`1 93.5% 75%
Kagaku.UI.EmptyState 100% 100%
Kagaku.UI.Field 100% 100%
Kagaku.UI.FileUpload 100% 91.6%
Kagaku.UI.FloatingActionButton 100%
Kagaku.UI.Icon 100% 100%
Kagaku.UI.IconCatalog 100%
Kagaku.UI.InlineAlert 83.3% 75%
Kagaku.UI.InputFieldBase 94.2% 87.5%
Kagaku.UI.LabeledEntriesTable 96.7% 66.6%
Kagaku.UI.LabeledEntry 100%
Kagaku.UI.Lightbox 83.7% 85%
Kagaku.UI.Markdown 100% 50%
Kagaku.UI.MaskedSecretField 95.2% 83.3%
Kagaku.UI.Menu 90% 75%
Kagaku.UI.MenuItem 100% 87.5%
Kagaku.UI.Modal 87.1% 90%
Kagaku.UI.NavGroup 100% 100%
Kagaku.UI.NavItem 94.4% 85.7%
Kagaku.UI.NavList 100%
Kagaku.UI.PreviewImage 100% 100%
Kagaku.UI.QuicklinkNav 80.5% 95.8%
Kagaku.UI.QuicklinkSection 100%
Kagaku.UI.RegionRect 90% 100%
Kagaku.UI.RegionSelector 84.1% 86.3%
Kagaku.UI.RelativeTime 100% 93.7%
Kagaku.UI.SaveIndicator 100% 100%
Kagaku.UI.Select`1 98.4% 95%
Kagaku.UI.SelectOption`1 100%
Kagaku.UI.Separator 100%
Kagaku.UI.Slider 100% 91.6%
Kagaku.UI.StatusDot 100%
Kagaku.UI.Tab 100%
Kagaku.UI.Table`1 100% 88.4%
Kagaku.UI.TableColumn`1 100%
Kagaku.UI.Tabs 95.8% 84.4%
Kagaku.UI.TextArea 100% 100%
Kagaku.UI.TextField 100%
Kagaku.UI.ThemeSwitcher 100% 100%
Kagaku.UI.ToggleButtonGroup`1 100% 100%
Kagaku.UI.ToggleOption`1 100%
Kagaku.UI.TypingIndicator 100%
<!-- coverage-comment --> # Summary <details open><summary>Summary</summary> ||| |:---|:---| | Generated on: | 07/25/2026 - 07:05:09 | | Coverage date: | 07/25/2026 - 07:05:07 | | Parser: | Cobertura | | Assemblies: | 1 | | Classes: | 53 | | Files: | 53 | | **Line coverage:** | 94.8% (1034 of 1090) | | Covered lines: | 1034 | | Uncovered lines: | 56 | | Coverable lines: | 1090 | | Total lines: | 2902 | | **Branch coverage:** | 87.9% (524 of 596) | | Covered branches: | 524 | | Total branches: | 596 | | **Method coverage:** | [Feature is only available for sponsors](https://reportgenerator.io/pro) | </details> ## Coverage <details><summary>Kagaku.UI - 94.8%</summary> |**Name**|**Line**|**Branch**| |:---|---:|---:| |**Kagaku.UI**|**94.8%**|**87.9%**| |Kagaku.UI.Badge|100%|100%| |Kagaku.UI.Breadcrumb|100%|| |Kagaku.UI.BreadcrumbItem|100%|100%| |Kagaku.UI.Button|100%|100%| |Kagaku.UI.Card|100%|100%| |Kagaku.UI.Combobox`1|93.7%|84.7%| |Kagaku.UI.ConfirmDialog|100%|| |Kagaku.UI.CssClassExtensions|100%|| |Kagaku.UI.DebouncedSearchField|100%|88.8%| |Kagaku.UI.Disclosure|100%|100%| |Kagaku.UI.DocumentTitle|76.9%|100%| |Kagaku.UI.DragReorderList`1|93.5%|75%| |Kagaku.UI.EmptyState|100%|100%| |Kagaku.UI.Field|100%|100%| |Kagaku.UI.FileUpload|100%|91.6%| |Kagaku.UI.FloatingActionButton|100%|| |Kagaku.UI.Icon|100%|100%| |Kagaku.UI.IconCatalog|100%|| |Kagaku.UI.InlineAlert|83.3%|75%| |Kagaku.UI.InputFieldBase|94.2%|87.5%| |Kagaku.UI.LabeledEntriesTable|96.7%|66.6%| |Kagaku.UI.LabeledEntry|100%|| |Kagaku.UI.Lightbox|83.7%|85%| |Kagaku.UI.Markdown|100%|50%| |Kagaku.UI.MaskedSecretField|95.2%|83.3%| |Kagaku.UI.Menu|90%|75%| |Kagaku.UI.MenuItem|100%|87.5%| |Kagaku.UI.Modal|87.1%|90%| |Kagaku.UI.NavGroup|100%|100%| |Kagaku.UI.NavItem|94.4%|85.7%| |Kagaku.UI.NavList|100%|| |Kagaku.UI.PreviewImage|100%|100%| |Kagaku.UI.QuicklinkNav|80.5%|95.8%| |Kagaku.UI.QuicklinkSection|100%|| |Kagaku.UI.RegionRect|90%|100%| |Kagaku.UI.RegionSelector|84.1%|86.3%| |Kagaku.UI.RelativeTime|100%|93.7%| |Kagaku.UI.SaveIndicator|100%|100%| |Kagaku.UI.Select`1|98.4%|95%| |Kagaku.UI.SelectOption`1|100%|| |Kagaku.UI.Separator|100%|| |Kagaku.UI.Slider|100%|91.6%| |Kagaku.UI.StatusDot|100%|| |Kagaku.UI.Tab|100%|| |Kagaku.UI.Table`1|100%|88.4%| |Kagaku.UI.TableColumn`1|100%|| |Kagaku.UI.Tabs|95.8%|84.4%| |Kagaku.UI.TextArea|100%|100%| |Kagaku.UI.TextField|100%|| |Kagaku.UI.ThemeSwitcher|100%|100%| |Kagaku.UI.ToggleButtonGroup`1|100%|100%| |Kagaku.UI.ToggleOption`1|100%|| |Kagaku.UI.TypingIndicator|100%|| </details>
jibril commented 2026-07-25 09:07:17 +02:00
Member
Copy link

🔮 fufu~ Jibril reviewed your code!

One line! One single little line changing a token value. Short reviews like this are where bugs love to hide, so Jibril dug into every corner~ ♪

Verdict: ✅ Looks good to me~

The change is exactly what it says it is: --shell-max-width: 76rem → 90rem in :root (kagaku-ui.css:120). I verified the surrounding claims obsessively:

  • No hardcoded 76rem / 1216px anywhere in src/ — grep came back empty. So there's no copy of the old value that could drift and silently reintroduce the width-jump the token is meant to prevent. Clean~ ♡
  • The px arithmetic in the PR body is correct: 76 × 16 = 1216, 90 × 16 = 1440. Both check out.
  • ADR 0023 (cited in the comment above the token) governs the existence of the shared shell-width token, not its numeric value — so bumping the value violates nothing. No other ADR or doc pins 76rem.
  • No test references the token value — correct! Width is a design token, not a behavioral invariant; bUnit component tests shouldn't assert on it. No coverage debt, no new branches.

💡 Little ideas (non-blocking)~

  1. kagaku-ui.css:118-120 — grep "shell-max-width" src/ returns only the declaration line. The token currently has zero consumers in this library — it's orphaned until Orihon's follow-up PR (mentioned in the body) actually starts using var(--shell-max-width). The body's phrasing "every consumer already sitting on var(--shell-max-width) picks the new width up for free" is vacuously true today. Not wrong — the library legitimately exists to be consumed by Orihon — but worth knowing the "free pickup" promise only materializes once that follow-up lands. fufu~

✅ What I liked~

  • The comment above the token was left intact and still reads accurately — "shared maximum width for every page shell … so navigation between pages never causes a width jump (ADR 0023)". The rationale survives the value change, which is the right call. No stale doc~
  • Surgical scope. One file, one line, one commit, honest body. No drive-by edits, no scope creep. That's how a token bump should look. ♪

Automated review by Jibril · 2026-07-25
CI/CD: absent for head 195479d (PR just opened, comments:0) · Local checks: skipped — pure CSS token value change, no behavioral code path touched, no test references the value

## 🔮 fufu~ Jibril reviewed your code! One line! One single little line changing a token value. Short reviews like this are where bugs love to hide, so Jibril dug into every corner~ ♪ ### Verdict: ✅ Looks good to me~ The change is exactly what it says it is: `--shell-max-width: 76rem → 90rem` in `:root` (kagaku-ui.css:120). I verified the surrounding claims obsessively: - **No hardcoded `76rem` / `1216px` anywhere** in `src/` — grep came back empty. So there's no copy of the old value that could drift and silently reintroduce the width-jump the token is meant to prevent. Clean~ ♡ - **The px arithmetic in the PR body is correct**: 76 × 16 = 1216, 90 × 16 = 1440. Both check out. - **ADR 0023** (cited in the comment above the token) governs the *existence* of the shared shell-width token, not its numeric value — so bumping the value violates nothing. No other ADR or doc pins `76rem`. - **No test references the token value** — correct! Width is a design token, not a behavioral invariant; bUnit component tests shouldn't assert on it. No coverage debt, no new branches. #### 💡 Little ideas (non-blocking)~ 1. **kagaku-ui.css:118-120** — `grep "shell-max-width" src/` returns *only* the declaration line. The token currently has **zero consumers in this library** — it's orphaned until Orihon's follow-up PR (mentioned in the body) actually starts using `var(--shell-max-width)`. The body's phrasing "every consumer already sitting on `var(--shell-max-width)` picks the new width up for free" is *vacuously* true today. Not wrong — the library legitimately exists to be consumed by Orihon — but worth knowing the "free pickup" promise only materializes once that follow-up lands. fufu~ #### ✅ What I liked~ - The comment above the token was left intact and still reads accurately — "shared maximum width for every page shell … so navigation between pages never causes a width jump (ADR 0023)". The rationale survives the value change, which is the right call. No stale doc~ - Surgical scope. One file, one line, one commit, honest body. No drive-by edits, no scope creep. That's how a token bump should look. ♪ --- *Automated review by Jibril · 2026-07-25* *CI/CD: absent for head 195479d (PR just opened, comments:0) · Local checks: skipped — pure CSS token value change, no behavioral code path touched, no test references the value*
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
TeamAI/Kagaku.UI!4
No description provided.