jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign the setup flow and consolidate the CSS into one primitives layer

Browse Source 
Onboarding asks explicitly for one or two parents and shows one card per
parent for balances; the balance form is per parent with inline
validation; the partner can be filled from the FK deduction or added
from it. Settings and Dashboard reuse the same form.

CSS: bare buttons carry no colour any more; buttons, cards, choice
cards, fields, alerts, badges, eyebrow and modal chrome are defined once
in primitives.css. Media queries live only in responsive.css. A style
guard test blocks hex, !important and stray media queries. Bilingual
fixes: calendar selects size by content, header no longer wraps. Vitest
is capped at four workers.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Jacob Hagstedt
2026-09-19 12:27:29 +02:00
parent e4719cb9ae
commit ae6db7e16f
105 changed files with 5683 additions and 3690 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/responsive.css
+130 -76
View File
@@ -1,4 +1,9 @@
/* S7 - Responsive & Accessibility */
/* S7 - Responsive & Accessibility
*
* The ONLY file in the app allowed to contain @media (enforced by
* styles.test.ts) — every viewport/motion/contrast override lives here so
* there is one place to check for breakpoints instead of one per feature
* file. */
/* Mobile - Small screens (max 640px) */
@media (max-width: 640px) {
@@ -7,29 +12,63 @@
padding: var(--sp-3) var(--sp-4);
}
.header__top {
margin-bottom: var(--sp-3);
.header__bar {
row-gap: var(--sp-3);
}
/* #5 — reorders the same four groups (brand/nav/identity/logout — no
* markup change, just `order`) into: brand + logout on row 1, the nav as
* a full-width row of three equal buttons, then the child select
* full-width below. The parent name is dropped at this width — the child
* select alone already identifies "whose plan this is" without a second,
* name-only line competing for the same row. */
.header__brand {
order: 1;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-base);
}
.header__logout {
order: 2;
flex-shrink: 0;
}
.header__nav {
order: 3;
flex: 0 0 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
}
.header__nav-link {
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-sm);
}
.header__title {
font-size: var(--fs-base);
width: 100%;
justify-content: center;
}
.header__identity {
gap: var(--sp-2);
font-size: var(--fs-sm);
order: 4;
flex: 0 0 100%;
margin-left: 0;
}
/* Main content */
.header__child-select {
width: 100%;
max-width: none;
}
.header__parent-name {
display: none;
}
/* Main content — the container picks up the horizontal gutter; sections
* themselves stay at zero horizontal padding at every width (see
* layout.css's `.dashboard__section` etc. base rule) so this must only
* ever add top spacing/margin here, never re-introduce side padding. */
[data-testid='layout-main'] {
padding: var(--sp-4);
}
@@ -38,21 +77,24 @@
.settings-page__section,
.calendar__section,
.tips-page__section {
padding: var(--sp-4);
padding-top: var(--sp-4);
margin-bottom: var(--sp-4);
}
/* Metrics - single column */
.overview-metrics__list {
.overview-metrics__list,
[data-testid='metrics-list'] {
grid-template-columns: 1fr;
}
/* Forms - full width */
.form-group input,
.form-group select,
.form-group textarea {
.form-group textarea,
.vacation-days-input__field,
.planning-goal-selector__select,
.parent-profile-input__field {
max-width: none;
width: 100%;
}
.form-grid {
@@ -84,45 +126,33 @@
width: 70px;
}
/* Modals */
.qrcode-modal {
width: 95%;
padding: var(--sp-4);
max-height: 95vh;
/* Modals — the overlay already gutters the content with its own padding
* and `.modal__content`'s `width: min(100%, var(--modal-w))` already caps
* it to the viewport, so only the footer's button stacking needs a
* mobile-specific rule. */
.modal__footer {
flex-direction: column-reverse;
}
.modal__footer .btn {
width: 100%;
}
.qrcode-modal__qr-image {
max-width: 250px;
}
.qrcode-modal__button-group {
flex-direction: column-reverse;
}
.qrcode-modal__button {
/* Delete-confirmation row: the warning text gets its own line, and the
* two buttons split the row evenly (still equal height, still no
* mid-phrase wrapping) rather than stacking into three separate rows. */
.modal__delete-confirm-text {
width: 100%;
margin-right: 0;
}
/* Footer */
footer {
padding: var(--sp-4);
font-size: var(--fs-sm);
}
/* Button group */
.modal__footer {
flex-direction: column-reverse;
}
.modal__footer button {
width: 100%;
}
/* Remove max-width on modal content */
.modal-content {
width: 95%;
padding: var(--sp-4);
max-height: 95vh;
.modal__delete-confirm .btn {
flex: 1;
min-width: 0;
}
/* Lists */
@@ -139,7 +169,7 @@
}
.loading-spinner__icon {
font-size: 36px;
font-size: var(--icon-md);
}
/* Calendar responsiveness */
@@ -156,17 +186,61 @@
font-size: var(--fs-sm);
}
/* Pre-existing bug this pass also fixes: `.calendar__layout` never
* stacked, so the fixed-width preset rail sat on top of Friday/Saturday/
* Sunday's columns instead of beside them once the month grid had no room
* left. The rail moves below the grid and goes full-width. */
/* #4 — at 390px the month/year selects (each ~12ch/7ch min-width) plus the
* two prev/next icon buttons are tight against the header's title font
* size; dropping the select text down one step keeps the whole header row
* comfortably inside the viewport (it still wraps cleanly via
* `.calendar__title`'s `flex-wrap` if a locale's month name is wider). */
.calendar__month-select,
.calendar__year-select {
font-size: var(--fs-lg);
}
/* The fixed-width preset rail sits beside the month grid on desktop; on
* mobile the layout stacks and the rail goes full-width below the grid.
* `align-items: stretch` overrides the base rule's `flex-start` (there to
* top-align the rail next to the grid in the row layout) — without it, a
* column-direction flex item is sized by its own shrink-to-fit content
* width instead of stretching to the container's width. `.calendar__main`
* (a CSS Grid with a fixed 50px week-number column) then sized itself off
* its grid tracks' max-content width — well past the viewport — instead
* of the actual space available, which is exactly what caused the
* mobile horizontal-scroll bug once a band's content gave those tracks
* something to size around. */
.calendar__layout {
flex-direction: column;
align-items: stretch;
}
.preset-rail {
width: 100%;
}
/* A horizontally-scrollable row of presets, not a stack — keeps the rail
* from pushing the month grid far down the page on a short viewport,
* without ever growing the page itself wider than the viewport (the
* scrolling is contained to this row, see `overflow-x` below). */
.preset-rail__buttons {
flex-direction: row;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--sp-1);
}
.preset-rail__button {
flex: 0 0 auto;
min-width: 65vw;
scroll-snap-align: start;
}
/* Footer — same side gutter as [data-testid='layout-main'] at this width. */
footer {
padding: var(--sp-4) 0;
}
.footer__inner {
padding: 0 var(--sp-4);
}
}
/* Tablet - Medium screens (641px to 1024px) */
@@ -184,7 +258,11 @@
}
}
/* Accessibility - Reduced Motion */
/* Accessibility - Reduced Motion
*
* The universal `*` rule collapses every transition/animation duration to
* near-zero already; there is deliberately no second, narrower list of
* selectors repeating that on top of it. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
@@ -194,20 +272,6 @@
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.loading-spinner__icon {
animation: none;
}
.header__nav-link,
.header__logout-button,
.header__child-select,
input,
select,
textarea,
button {
transition: none;
}
}
/* High Contrast Mode */
@@ -237,13 +301,3 @@
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* High Contrast Focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}