tom/parenthese
1
0 Fork 0
mirror of https://github.com/IliesAllali/parenthese.git synced 2026-11-14 08:30:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(fiche): portrait en modification à taille fixe, même avec une vraie photo

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Opus 5.5 committed 2026-10-18 23:56:01 +02:00
1 parent c6f62dc907
commit 53e4dc326a
1 file changed
+6 -5
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PersonCard.css
+6 -5
View File
@@ -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; }