From 7df421dba36984ae843a1bfff820373fb2d0bced Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Mon, 11 May 2026 10:44:11 -0400 Subject: [PATCH] =?UTF-8?q?fix:=20remove=20all=20flexbox=20=E2=80=94=20Gri?= =?UTF-8?q?d=20only=20(CLAUDE.md=20transgression)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I shipped display:inline-flex / display:flex across .mps-button, .mps-button-primary, .edit-card-icon, edit-page h3 headers, .edit-status-bar, .edit-status-pill, .edit-save-bar, .upload-thumbnails-header, .upload-thumbnail-item, and an inline style on the torrent_opt_in label — all violations of the project's Grid-only rule. fox caught it. All converted: - .mps-button / .mps-button-primary / .edit-card-icon: display: inline-grid; place-items: center (was inline-flex + center) - edit-page h3 headers (icon + title): display: grid; grid-template-columns: auto 1fr; align-items: center - .edit-status-bar: text-align: right + inline-grid pills that flow/wrap (was flex + flex-wrap + justify-content: flex-end) - .edit-status-pill: display: inline-grid; grid-auto-flow: column - .edit-save-bar: display: grid; grid-template-columns: 1fr auto - .upload-thumbnails-header: display: grid; grid-template-columns: 1fr auto with a max-width: 600px media query collapsing to 1fr - .upload-thumbnail-item: display: grid; grid-auto-rows: min-content; align-content: space-between (replaces the flex margin-top: auto trick for pinning the upload form to the bottom of the stretched cell) - torrent_opt_in label inline style: display:grid;grid-template-columns:auto 1fr CLAUDE.md updated: the CSS-layout rule now spells out the Grid equivalent for every flex pattern, clarifies which alignment properties ARE valid in grid context, and includes a dated SHAME LOG entry for this transgression. Tests pass (11 in target slices). --- CLAUDE.md | 15 +++- make_post_sell/static/css/common.css | 93 ++++++++++++------------ make_post_sell/templates/product_edit.j2 | 2 +- 3 files changed, 61 insertions(+), 49 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 43fec81..f698e4b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -269,7 +269,20 @@ Always use `uuid_str` when you need a string copy of our identifier. Models inhe **CRITICAL WORK ETHIC**: Our user pays significant money for development work and expects thorough, complete solutions. NEVER try to do our minimum or cut corners. When asked to implement features, provide comprehensive, production-ready implementations that consider all aspects of our request. -**CSS LAYOUT REQUIREMENTS**: This project uses CSS Grid exclusively for layout. NEVER use Flexbox (flex) for layout. Always use CSS Grid properties for positioning and alignment. +**CSS LAYOUT REQUIREMENTS — GRID ONLY, NO FLEXBOX, NO EXCEPTIONS**: +This project uses CSS Grid exclusively for layout. **NEVER** write `display: flex`, `display: inline-flex`, `flex:`, `flex-direction`, `flex-wrap`, `justify-content: flex-*`, `align-items: flex-*`, or `flex-grow/shrink/basis`. There is no situation where flexbox is acceptable. + +Grid equivalents for the patterns you'd reach for flex: +- **Centering content** (one item dead-center): `display: grid; place-items: center;` (or `display: inline-grid; place-items: center;` for inline-level buttons/badges). +- **Two items, one left one right** (`justify-content: space-between`): `display: grid; grid-template-columns: 1fr auto;` (left item in the `1fr` column, right item in `auto`). +- **Row of items, right-aligned**: don't make the container a grid — set `text-align: right` (or `text-align: end`) and let inline-level children flow/wrap naturally. Or `display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: end;` if you don't need wrapping. +- **Vertical stack with last item pushed to bottom** (`margin-top: auto` in flex): `display: grid; align-content: space-between;` on the container (works when the container is taller than its content, e.g. inside a `align-items: stretch` parent grid). +- **Equal-height cells in a row**: parent `display: grid; grid-template-columns: repeat(auto-fit, minmax(Npx, 1fr)); align-items: stretch;`. +- **Icon + label header**: `display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-N);`. + +Note: `align-items`, `justify-items`, `align-content`, `justify-content`, `place-items`, `place-content`, `gap` are all **valid in grid context** — only the `flex-*` keyword values (`flex-start`, `flex-end`) and the `flex` shorthand / `flex-direction` / `flex-wrap` / `display: flex` are forbidden. Use `start`/`end`/`center`/`stretch`/`space-between` etc. as the values. + +**SHAME LOG — 2026-05-11**: agent blackops shipped `display: inline-flex` on `.mps-button` and several edit-page components (`.edit-status-bar`, `.edit-save-bar`, `.upload-thumbnails-header`, `.edit-card-icon`, h3 headers, `.mps-button-primary`) across multiple commits before fox caught it. All converted to Grid. This rule is non-negotiable; re-read it before touching any CSS. **DESIGN TOKENS**: All new styles must consume tokens from `tokens.css` — never hardcode colors, spacing, radii, shadows, or font sizes. Use `var(--token-name)` or `var(--token-name, fallback)`. Our token scale uses a 4px spacing base and major third (1.250) type scale. diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 553c392..dccc6a5 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -728,8 +728,10 @@ pre, code { .mps-button { /* Normalize so