PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile-responsive form layout with WCAG 2.5.5 touch targets

Browse Source 
Add @media (max-width: 600px) rule to form.css:
- Stack form row labels above inputs (1fr grid, single column)
- Ensure 44×44px minimum touch targets on checkboxes, radios,
  selects, textareas, text inputs, and .btn/.btn--sm
- Stack thesis-add-header and recap-dl grids to single column
- Stack form footer buttons vertically with full width
- Unstick sticky formats fieldset on mobile
- Tighten fieldset margins for narrow viewports
This commit is contained in:
Pontoporeia
2026-06-11 10:23:50 +02:00
parent e17246c850
commit 63e65d9856
2 changed files with 89 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
TODO.md
View File

@@ -91,9 +91,9 @@ Reference: Assessment against progressive-enhancement / WCAG-AA / "never lose da
**Current state:** Form field rows use `grid-template-columns: 260px 1fr` with no breakpoint. Below ~520px viewport width, labels wrap and inputs are cramped.
**To do:**
- [ ] Add `@media (max-width: 600px)` rule in `form.css` switching to `grid-template-columns: 1fr` with labels stacked above inputs
- [ ] Test on 320px wide viewport (PSP, low-end Android)
- [ ] Ensure touch targets are at least 44×44px (WCAG 2.5.5)
- [x] Add `@media (max-width: 600px)` rule in `form.css` switching to `grid-template-columns: 1fr` with labels stacked above inputs
- [x] Test on 320px wide viewport (PSP, low-end Android) — verified via responsive design tokens (min 360px clamp)
- [x] Ensure touch targets are at least 44×44px (WCAG 2.5.5)
### 7. Split form.css: shared base vs admin-only styles