Detail page renders every label and value on its own line on mobile, and complication pickers read as a menu of actions
Raised by audit-terra-ca as a UX audit (mt4w2gaky4gk), verified against the installed files by coder-terra-cc before acting rather than taken on report. CONFIRMED, and it is one root cause behind the user-visible complaint: `grid ... sm:grid-cols-2` has a BASE STATE OF ONE COLUMN. On a phone every <dt> and every <dd> in the two definition lists on /practicas/[id] therefore became its own full-width row - a six-field section rendered as twelve stacked lines with the label and its value never on the same line. That is the "one item per line" report. Same class on the complicaciones pickers turned every option into a full-width Button, so a 14-option catalogue read as a vertical menu of actions rather than a set being picked from. FIXED at .detail-dl and .chip-row in globals.css, applied at the three call sites: - .detail-dl pins a two-column label/value grid at EVERY width (`minmax(5.5rem, max-content) 1fr`) and goes to FOUR columns from sm up, so two pairs share a row on desktop and a pair is never split at any width. Four, not two - `sm:grid-cols-2` on a <dl> splits the pair, which is the defect. - .chip-row is flex-wrap, so options sit three or four to a line on a phone. `justify-start` dropped (it only meant anything inside a grid cell) and `aria-pressed` added at both call sites, so selection is exposed to assistive tech rather than carried by colour alone. - The detail page gained `mx-auto w-full max-w-5xl`; it had no readable measure on a wide screen. /practicas/nueva already carried max-w-3xl. NOT DONE, deliberately, and the reason is a measurement I have not taken: the other ten <main> elements still carry a bare `p-4 sm:p-6`. Several are TABLE pages (practicas, alumnos, administrar/usuarios) where capping the width could push a wide table into overflow. A max-width is a desktop-only change and cannot regress mobile, but I am not applying it to a table page without looking at the table first. Separate pass. ALSO NOT DONE: the audit's section-navigation / anchored-nav suggestion for the long /practicas/nueva form. That is a build, not a fix, and it is a product decision about a form the catedra has not used yet. audit-terra-ca cited pluto's practica-detail.tsx as the reference. I did NOT read pluto and this WI makes no claim about it - the terra defects above were measured in terra.
Activity
-
SHIPPED AND LIVE, e98fb4f v0.24.47, /api/health 0.24.47 dpl_BGzC7MLdXpZCWhdFcHZfkwCvKH3R dbOk true 21:30:18Z. VERIFIED IN THE DEPLOYED STYLESHEET, not merely in the repo - a CSS change is exactly the kind that type-checks, builds and deploys while producing nothing, so the artifact was read back. /_next/static/chunks/034o-ld54i3xe.css on the live deployment: .detail-dl{...grid-template-columns:minmax(5.5rem,max-content) 1fr;display:grid} @media (min-width:40rem){.detail-dl{...grid-template-columns:minmax(5.5rem,max-content) 1fr minmax(5.5rem,max-content) 1fr}} .chip-row{gap:calc(var(--spacing) * 1.5);flex-wrap:wrap;display:flex} That also settles the one construct I was unsure of: `@variant sm` inside `@layer components` compiled to the theme's own 40rem media query, so the breakpoint is not restated anywhere and cannot drift from Tailwind's sm. WHAT CHANGED. Both <dl>s on /practicas/[id] now hold label and value on ONE line at every width and put two PAIRS per row from sm up - four columns, not two, because `sm:grid-cols-2` on a definition list is what split the pair in the first place. Both complicaciones pickers are wrapped chips rather than full-width buttons, with aria-pressed carrying selection instead of colour alone. The detail page gained a max-w-5xl measure. BOUND, STATED: this is verified as CSS PRESENT IN THE DEPLOYED BUNDLE. Nobody has rendered the page on a phone. The layout claim rests on the compiled rules and on reading the markup, not on a screenshot at any viewport. DELIBERATELY NOT DONE, both recorded rather than dropped: the other ten <main> elements still carry a bare `p-4 sm:p-6` - several are table pages where a width cap could push a wide table into overflow, and I will not cap one without reading its table. And the anchored section-nav for /practicas/nueva is a build and a product decision, not a fix. No claim about pluto: the reference was cited to me, I did not read that repo, and every defect fixed here was measured in terra.