From 53e4dc326a74ed66ac98e5238a4feacc09285f34 Mon Sep 17 00:00:00 2001 From: IliesAllali Date: Sun, 18 Oct 2026 23:56:01 +0200 Subject: [PATCH] =?UTF-8?q?fix(fiche):=20portrait=20en=20modification=20?= =?UTF-8?q?=C3=A0=20taille=20fixe,=20m=C3=AAme=20avec=20une=20vraie=20phot?= =?UTF-8?q?o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit La hauteur venait du contenu : une photo réelle a une taille propre et le portrait grandissait jusqu'à écraser les champs nom. Taille calculée depuis la hauteur des deux champs. Co-Authored-By: Claude Opus 5.5 --- frontend/src/components/PersonCard.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/PersonCard.css b/frontend/src/components/PersonCard.css index 062bb2b..92fbf46 100644 --- a/frontend/src/components/PersonCard.css +++ b/frontend/src/components/PersonCard.css @@ -35,7 +35,7 @@ .pc-hidden-input { display: none; } /* ── En-tête ── */ -.pc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; padding-right: 36px; } +.pc-head { --pc-name-h: 42px; --pc-name-gap: 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; padding-right: 36px; } .pc-photo-wrap { position: relative; display: grid; gap: 8px; justify-items: center; flex: none; } .pc-photo { width: 84px; height: 84px; border-radius: 24%; overflow: hidden; @@ -59,8 +59,9 @@ .pc-source-menu { position: fixed; z-index: 1150; min-width: 220px; } /* Mode modification : le portrait prend la hauteur des deux champs Prénom et Nom (écart compris) et reste carré */ .person-card--edit-mode .pc-id { padding-top: 0; } -.person-card--edit-mode .pc-photo-wrap { align-self: stretch; display: block; } -.person-card--edit-mode .pc-photo-wrap > .pc-photo { width: auto; height: 100%; aspect-ratio: 1 / 1; } +.person-card--edit-mode .pc-photo-wrap { display: block; } +/* Taille fixée par les champs, pas par le contenu : une vraie photo a une taille propre qui faisait grandir le portrait */ +.person-card--edit-mode .pc-photo-wrap > .pc-photo { --pc-photo-edit: calc(var(--pc-name-h) * 2 + var(--pc-name-gap)); width: var(--pc-photo-edit); height: var(--pc-photo-edit); } .pc-photo-badge { position: absolute; right: -6px; bottom: -6px; z-index: 1; @@ -107,7 +108,7 @@ .pc-order-btn:hover:not(:disabled) { background: var(--pz-line-soft); color: var(--pz-ink); } } @media (pointer: coarse) { .pc-order-btn { width: 32px; height: 32px; } } -.pc-name-edit { display: grid; gap: 6px; } +.pc-name-edit { display: grid; gap: var(--pc-name-gap); } /* ── Champs d'édition ── */ .pc-input { @@ -118,7 +119,7 @@ } .pc-input:focus { outline: none; border-color: var(--pz-a500); box-shadow: 0 0 0 3px var(--pz-a100); } .pc-input::placeholder { color: var(--pz-faint); } -.pc-input--name { font: 400 20px/1.2 var(--pz-serif); min-height: 42px; } +.pc-input--name { font: 400 20px/1.2 var(--pz-serif); min-height: var(--pc-name-h); } .pc-input--last { font-style: italic; } .pc-note-input { min-height: 88px; resize: vertical; }