From fcc6b288054ddf2a22cdd279bd99d3565fda5831 Mon Sep 17 00:00:00 2001
From: Christopher McKay <101884182+karotkriss@users.noreply.github.com>
Date: Wed, 22 Jul 2026 17:07:55 -0400
Subject: [PATCH 1/2] fix(docs): make axi.md readable on phones and tablets

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.
---
 AGENTS.md       |   3 ++
 docs/index.html | 106 +++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index adf5e2ca..02625194 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -79,6 +79,9 @@ Because the release PR carries the version bump, a downstream `*-axi` tool only
 - The AXI catalog and principle summaries are single-sourced from `catalog.yaml` and `principles.yaml`.
   `pnpm run docs:gen` rewrites the marked `generated:...` regions of README.md and docs/index.html; never hand-edit those regions.
   The `docs-check` workflow runs `pnpm run docs:check` and fails on drift, including when `.agents/skills/axi/SKILL.md` section headings stop matching the canonical principle titles.
+  The catalog markers sit inside `<tbody>`, so the surrounding `<table>`/`<thead>` markup in docs/index.html is hand-editable and generator-safe.
+- docs/index.html carries the site's page-local CSS in one inline `<style>` block; the site otherwise loads the shared `kunchenguid-design-system` stylesheet, which this repo does not own.
+  Anything scoped to the two catalog tables uses their `.table-catalog` class - not `.card .table-wrap .table`, which also matches the benchmark Results table.
 
 ## Maintaining this file
 
diff --git a/docs/index.html b/docs/index.html
index 09bc9d69..d2e02948 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -112,6 +112,108 @@
         width: 1rem;
         height: 1rem;
       }
+
+      /* Responsive fixes. Each breakpoint is a measured number:
+           48rem / 768px  the site's own existing breakpoint; both catalogs
+           62rem / 992px  above it the chart bar track is >=136px unaided
+           72rem / 1152px where the container hits its max-width and the
+                          longest command finally clears the copy button */
+
+      /* A grid item's automatic minimum size is its min-content width, so a
+         .card was forced open to the widest unwrappable <pre> line and the
+         page scrolled instead of the code block. */
+      .grid > * {
+        min-width: 0;
+      }
+
+      /* .chart-label (16rem) + .chart-value (3.5rem) + gaps are unshrinkable,
+         leaving the bar track 0px at 320. Put the label on its own line. */
+      @media (max-width: 62rem) {
+        .chart-rows {
+          gap: 0.625rem;
+        }
+        .chart-row {
+          flex-wrap: wrap;
+          row-gap: 0.125rem;
+        }
+        .chart-label {
+          width: 100%;
+          text-align: left;
+        }
+      }
+
+      /* .btn-copy is absolutely positioned over a horizontally scrolling
+         <pre>, so padding the code cannot clear it - the text scrolls
+         underneath. Reserve a band above the code and use the room for a
+         44px hit area. */
+      @media (max-width: 72rem) {
+        .copyable {
+          padding-top: 3.25rem;
+        }
+        .btn-copy {
+          top: 0.5rem;
+          right: 0.5rem;
+          width: 44px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      /* Both catalogs are wide tables whose Description column sat off-view
+         with no affordance that anything was hidden. Stack each row as a card
+         so the description is readable, and give both the same shape so they
+         read as one component.
+
+         Scoped by .table-catalog, which is on those two tables only. Not by
+         .card .table-wrap .table: the Results table matches that too, and
+         stacking it would destroy the column-to-column numeric reading that
+         is the entire point of it.
+
+         Column-count agnostic: first cell is the name, last cell is the
+         description, everything between is the metadata line. That covers the
+         official table's 3 columns and the community table's 4 with one rule
+         set instead of two near-copies. */
+      @media (max-width: 48rem) {
+        .table.table-catalog,
+        .table.table-catalog tbody,
+        .table.table-catalog tr,
+        .table.table-catalog td {
+          display: block;
+        }
+        .table.table-catalog thead {
+          display: none;
+        }
+        .table.table-catalog tr {
+          padding: 0.75rem 0;
+          border-bottom: var(--border-width) solid var(--color-border);
+        }
+        .table.table-catalog tr:last-child {
+          border-bottom: none;
+        }
+        .table.table-catalog td {
+          padding: 0;
+          border-bottom: none;
+        }
+        .table.table-catalog td:not(:first-child):not(:last-child) {
+          display: inline;
+          font-size: var(--text-xs);
+          color: var(--color-text-muted);
+        }
+        /* "by " only where an Author cell exists: 2nd cell of four. */
+        .table.table-catalog td:nth-child(2):nth-last-child(3)::before {
+          content: "by ";
+        }
+        /* "·" only between metadata cells, so it never leads the official
+           table's line, which is a domain alone. */
+        .table.table-catalog td:nth-child(n + 3):not(:last-child)::before {
+          content: " \00b7  ";
+        }
+        .table.table-catalog td:last-child {
+          margin-top: 0.25rem;
+        }
+      }
     </style>
   </head>
   <body>
@@ -287,7 +389,7 @@ <h2 data-annotate>The [AXI catalog].</h2>
         <div class="card mt-xl">
           <p class="section-label">Official</p>
           <div class="table-wrap">
-            <table class="table">
+            <table class="table table-catalog">
               <thead>
                 <tr>
                   <th>AXI</th>
@@ -356,7 +458,7 @@ <h2 data-annotate>The [AXI catalog].</h2>
         <div class="card mt-md">
           <p class="section-label">Community</p>
           <div class="table-wrap">
-            <table class="table">
+            <table class="table table-catalog">
               <thead>
                 <tr>
                   <th>AXI</th>

From 86c95cafaf781b95728629b2781d6fc9c873ccb7 Mon Sep 17 00:00:00 2001
From: Christopher McKay <101884182+karotkriss@users.noreply.github.com>
Date: Wed, 22 Jul 2026 17:16:19 -0400
Subject: [PATCH 2/2] no-mistakes(review): Remove page-specific guidance from
 repository memory

---
 AGENTS.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 02625194..adf5e2ca 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -79,9 +79,6 @@ Because the release PR carries the version bump, a downstream `*-axi` tool only
 - The AXI catalog and principle summaries are single-sourced from `catalog.yaml` and `principles.yaml`.
   `pnpm run docs:gen` rewrites the marked `generated:...` regions of README.md and docs/index.html; never hand-edit those regions.
   The `docs-check` workflow runs `pnpm run docs:check` and fails on drift, including when `.agents/skills/axi/SKILL.md` section headings stop matching the canonical principle titles.
-  The catalog markers sit inside `<tbody>`, so the surrounding `<table>`/`<thead>` markup in docs/index.html is hand-editable and generator-safe.
-- docs/index.html carries the site's page-local CSS in one inline `<style>` block; the site otherwise loads the shared `kunchenguid-design-system` stylesheet, which this repo does not own.
-  Anything scoped to the two catalog tables uses their `.table-catalog` class - not `.card .table-wrap .table`, which also matches the benchmark Results table.
 
 ## Maintaining this file