Nicolas
a8d86c7099
Réutilise la philosophie déjà en place pour la sidebar (défilement horizontal plutôt que compression illisible) au lieu d'un nouveau patron par page. Tout est strictement additif sous 640px — le rendu desktop est inchangé. - `AppLayout.scss` : `.app-content` passe de `--space-xl` (32px) à `--space-md` (16px) sous 640px — 64px de largeur utile récupérés sur un écran de ~375px. - `planning-page.scss` : la grille 7 jours défile déjà horizontalement (`overflow: auto` + `min-width: 62rem`) ; ce qui casse au tactile, c'est le `✕` de suppression d'une recette (`opacity: 0` hors survol) — épinglé visible + cible tactile agrandie sous 640px, idem le bouton « + ». - `dialog.scss` : `.dialog-panel` garde une gouttière latérale et gagne en hauteur utile sous 640px (le `--space-2xl` vertical est trop cher sur un écran court). - `recipe-picker-dialog.scss` : le split 2 colonnes forcé du catalogue (plus spécifique que le `@media` de recipes.scss) repasse à une colonne sous 640px. Tests : `layout.cy.ts` gagne un bloc « page content under 640px » — padding de `.app-content`, grille sur son propre scroll sans déborder la page, `✕` visible au tactile. 10/10 en local. Refs #39 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
83 lines
2.2 KiB
SCSS
83 lines
2.2 KiB
SCSS
// Modal panel — see Dialog.tsx. A native <dialog> opened via showModal(),
|
|
// so the browser supplies the backdrop/centering/focus-trap; this only
|
|
// resets its default UA styling (border, padding, colors) and layers the
|
|
// header/body layout on top. Colocated here rather than in global.scss
|
|
// since it's one component's styling, same convention as every feature's
|
|
// own .scss file (recipes.scss, planning-page.scss, …).
|
|
|
|
.dialog-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 48rem;
|
|
max-height: calc(100vh - var(--space-2xl));
|
|
margin: auto; // UA default for a shown <dialog>, kept explicit
|
|
padding: 0;
|
|
border: none;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
overflow: hidden;
|
|
|
|
&::backdrop {
|
|
background: rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
// On a phone the `48rem` cap is irrelevant (the viewport is narrower),
|
|
// but the `var(--space-2xl)` top/bottom breathing room is a large slice
|
|
// of a short screen — tighten it so a form-heavy dialog isn't
|
|
// needlessly cramped, and keep a small side gutter so the panel never
|
|
// sits edge to edge.
|
|
@media (max-width: 640px) {
|
|
max-width: calc(100vw - var(--space-md));
|
|
max-height: calc(100vh - var(--space-md));
|
|
}
|
|
}
|
|
|
|
.dialog-panel__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
h2 {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
}
|
|
|
|
.dialog-panel__close {
|
|
flex: none;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: none;
|
|
border-radius: var(--radius-base);
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--color-surface-alt);
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
.dialog-panel__body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--space-lg);
|
|
}
|
|
|
|
.dialog-panel__footer {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|