Nicolas
c29648e293
- Dialog.tsx : remplace le div role="dialog" par un <dialog> natif (showModal) — corrige lint/a11y/useSemanticElements, récupère gratuitement le piège de focus et l'Échap natifs. Le clic extérieur est rebranché en imperative addEventListener pour éviter lint/a11y/useKeyWithClickEvents sur un élément non interactif. - RecipePickerDialog.tsx : retire l'autoFocus (lint/a11y/noAutofocus), ordre des imports/formatage corrigés par `biome check --write`. - apps/api/test/planning.test.ts, apps/api/test/recipe.test.ts : les fixtures qui créent un `PlanningItem` directement via Prisma n'avaient pas le nouveau champ `portions` requis. - apps/web/cypress/e2e/planning-page.cy.ts : ajoute `portions` aux items mockés pour rester fidèle au contrat `PlanningItemView`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
63 lines
1.5 KiB
SCSS
63 lines
1.5 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);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|