fix(docs): make AXI site responsive on mobile - #109
Open
karotkriss wants to merge 2 commits into
Open
Conversation
The site had horizontal overflow at every viewport from 320 to 1024 (worst
case +348px at 320), the benchmark chart's bar track collapsed to 0px on a
phone, both catalog tables pushed their Description column off-view with no
affordance that anything was hidden, and the copy button sat on top of the
command it copies.
Four page-local CSS additions to the existing inline style block, plus a
`table-catalog` class on the two catalog tables:
- `.grid > * { min-width: 0 }` - a grid item's automatic minimum size is its
min-content width, so each card was forced open to the width of its longest
unwrappable `<pre>` line and the page scrolled instead of the code block.
- Below 62rem the chart label moves to its own line, so the bar track keeps
the full column width instead of the remainder after two fixed cells.
- Below 72rem the copy button gets a reserved band above the code and a 44px
hit area. It is absolutely positioned over a horizontally scrolling `<pre>`,
so padding the code alone cannot clear it.
- Below 48rem both catalogs stack each row as a card: name, one muted
metadata line, then the description.
Measured in Chrome at ten widths, before and after:
| Width | Overflow | Chart bar track | Community catalog | Official catalog |
| --- | --- | --- | --- | --- |
| 320 | +348 -> 0 | 0 -> 224px | 7,117 -> 4,626px | 1,297 -> 793px |
| 375 | +293 -> 0 | 15 -> 279px | 7,117 -> 4,066px | 1,297 -> 703px |
| 390 | +278 -> 0 | 30 -> 294px | 7,117 -> 3,910px | 1,297 -> 703px |
| 414 | +254 -> 0 | 54 -> 318px | 7,117 -> 3,730px | 1,297 -> 681px |
| 430 | +238 -> 0 | 70 -> 334px | 7,117 -> 3,708px | 1,252 -> 658px |
| 768 | +279 -> 0 | 24 -> 288px | 3,176 -> 2,991px | 446 -> 569px |
| 844 | +313 -> 0 | 46 -> 310px | unchanged | unchanged |
| 932 | +225 -> 0 | 90 -> 354px | unchanged | unchanged |
| 1024 | +133 -> 0 | unchanged | unchanged | unchanged |
| 1280 | 0 -> 0 | unchanged | unchanged | unchanged |
Zero horizontal overflow at all ten widths. Catalog content hidden off-view
goes from 108px to 0 at 320 and 38px to 0 at 390. The copy button covers 0px
of the command at every width, up from 20px covered, with a 44x44 target
instead of 26x26.
Desktop is untouched: at 1280 every measured value is identical before and
after, including total page height of 17,084px.
The catalog rules are scoped by the new `table-catalog` class rather than by
`.card .table-wrap .table`, which the benchmark Results table also matches.
Stacking that table would destroy the column-to-column numeric reading that
is the entire point of it. Both non-catalog tables were verified still
computing `display: table` with visible headers at 320, 390 and 768.
One accepted cost: the official catalog is 123px taller between roughly 615
and 768, where nothing was clipped to begin with. The alternative is a lower
breakpoint for that table alone, which would make the two catalogs diverge
across a band of widths.
The catalog `<table>` tags sit outside the `generated:catalog-*` markers,
which are inside `<tbody>`, so the class is generator-safe; `docs:check`
passes unchanged.
This was referenced Jul 22, 2026
Open
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.
Intent
The developer wanted the already approved responsive fix for axi.md shipped upstream as a pull request to kunchenguid/axi, with the branch hosted on the karotkriss fork because direct push access was unavailable. The change had to remain page-local, limited to docs/index.html, preserve the measured mobile improvements and exact 1280px desktop regression guard of 17,084px, use explicit catalog table classes, and avoid affecting the Results table, shared design-system repository, or baseline evidence. They required the repository's CONTRIBUTING workflow: keep origin pointed at the parent, use a conventional commit, push through the no-mistakes remote, and run the no-mistakes gate so its deterministic signature appears in the PR body. The work was only complete once the PR targeted kunchenguid/axi, CI was green, and the full PR URL was reported, with no manual PR creation or merging.
What Changed
Risk Assessment
✅ Low: The change is page-local, well bounded, and the follow-up restores AGENTS.md byte-identically to the base without introducing new source risks.
Testing
Inspected the page-local diff, passed the focused docs tests, and exercised the rendered site at 320px, 768px, and 1280px with screenshots and layout measurements; all intended responsive behavior worked and the exact 17,084px desktop guard held.
/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/mobile-320-hero.png)/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/mobile-320-copy-control.png)/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/mobile-320-catalog.png)/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/tablet-768-catalog.png)/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/desktop-1280-top.png)/tmp/no-mistakes-evidence/01KY5TK4DX3VEXMB3T3KDP287V/desktop-1280-results.png)Evidence: Responsive layout measurements
Chart
Catalog
Pipeline
Updates from git push no-mistakes
✅ **intent** - passed
✅ No issues found.
✅ **Rebase** - passed
✅ No issues found.
🔧 **Review** - 2 issues found → auto-fixed ✅
docs/index.html:185- At mobile widths,display: noneremoves the catalog headers from the accessibility tree while the cells are converted to blocks. Screen-reader users can lose the AXI, Author, Domain, and Description associations. Preserve accessible headers or add explicit accessible labels when stacking rows.AGENTS.md:82- The stated scope was limited todocs/index.html, but this commit also adds narrow implementation guidance to repository-wide agent memory. Remove these additions unless the maintainers explicitly want them as permanent project policy.🔧 Fix: Remove page-specific guidance from repository memory
✅ Re-checked - no issues remain.
✅ **Test** - passed
✅ No issues found.
git diff e5f198e5d34d0d08442c3e9df0b055ecc06e968a..86c95cafaf781b95728629b2781d6fc9c873ccb7 -- docs/index.htmlServeddocs/locally withpython3 -m http.server 4173 --directory docschrome-devtools-axi resize 320 800with overflow, chart-width, table-display, and copy-control measurementsCaptured the 320px hero, catalog, and copy-control screenshotsClicked the first copy control through the rendered browser UIchrome-devtools-axi resize 768 900with catalog and Results display measurementschrome-devtools-axi resize 1280 900with scroll-height, overflow, table-display, and copy-control measurementsCaptured the 768px catalog and 1280px desktop and Results screenshotspnpm run docs:test✅ **Document** - passed
✅ No issues found.
✅ **Lint** - passed
✅ No issues found.
✅ **Push** - passed
✅ No issues found.