Ecran partage : photo miniature flexible pour toujours rentrer dans l'ecran

Le bloc partage (photo + boutons + form impression) pouvait depasser la
hauteur de l'ecran quand le choix du nombre d'exemplaires s'affichait.
La miniature absorbe maintenant l'espace restant (flex + min-height:0)
au lieu d'une hauteur fixe en vh, les autres elements gardent leur taille.
This commit is contained in:
2026-06-21 22:13:26 +02:00
parent fe0a559c85
commit 66847dccf8
2 changed files with 24 additions and 6 deletions

View File

@@ -546,18 +546,35 @@ html, body {
} }
/* === Partage === */ /* === Partage === */
#ecran-partage {
justify-content: flex-start;
overflow: hidden;
padding: 0.8rem 0;
}
#ecran-partage h2 { #ecran-partage h2 {
margin-top: 2rem; margin-top: 0.5rem;
margin-bottom: 0;
font-weight: 300; font-weight: 300;
flex-shrink: 0;
} }
.photo-miniature { .photo-miniature {
margin: 1rem 0; flex: 1;
max-height: 30vh; min-height: 0;
width: 100%;
margin: 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
} }
.photo-miniature img { .photo-miniature img {
max-height: 30vh; max-width: 90%;
max-height: 100%;
width: auto;
height: auto;
border-radius: var(--rayon); border-radius: var(--rayon);
box-shadow: var(--ombre); box-shadow: var(--ombre);
} }
@@ -565,7 +582,8 @@ html, body {
.grille-partage { .grille-partage {
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
margin: 1.5rem 0; margin: 1rem 0;
flex-shrink: 0;
} }
.btn-partage { .btn-partage {

View File

@@ -7,7 +7,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="google" content="notranslate"> <meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" href="/css/style.css?v=2"> <link rel="stylesheet" href="/css/style.css?v=3">
<link rel="stylesheet" href="/css/themes.css"> <link rel="stylesheet" href="/css/themes.css">
</head> </head>
<body> <body>