diff --git a/app/globals.css b/app/globals.css index 4448360..50694ff 100644 --- a/app/globals.css +++ b/app/globals.css @@ -63,7 +63,11 @@ body { .skip-link:focus { left: 4px; } /* ── Screen reader only ── */ -.sr-only { +/* El legend/label de los widgets dentro del wizard se oculta visualmente — + el enunciado ya se muestra una sola vez en .wizard-prompt-block. Se deja + el texto accesible (nombre del fieldset/label) en vez de quitarlo. */ +.sr-only, +.wizard-answer-area .question-legend { position: absolute; width: 1px; height: 1px; @@ -586,9 +590,13 @@ body { margin: 0; } -/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo. */ +/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo. + flex: 0 1 auto (NO flex:1) — mide según su contenido, nunca se estira a llenar el alto + disponible. Si creciera con flex:1, una pregunta corta (3 opciones) dejaría la caja con + espacio vacío abajo y el fade ::after (sticky bottom:0) quedaría flotando justo después + del contenido real, lejos del borde inferior visual de la caja — en vez de pegado a él. */ .wizard-answer-area { - flex: 1; + flex: 0 1 auto; min-height: 0; max-height: 360px; overflow-y: auto; diff --git a/components/widgets/checkbox-group.tsx b/components/widgets/checkbox-group.tsx index 461b08a..fdb7e84 100644 --- a/components/widgets/checkbox-group.tsx +++ b/components/widgets/checkbox-group.tsx @@ -40,13 +40,14 @@ export function CheckboxGroup({ {required && } {required && (obligatorio)} - {maxSelect !== null ? ( + {/* El hint estático ("Podés marcar más de una opción") ya vive en + wizard-prompt-block (question.hint) — acá solo el contador vivo, + que es información que no está en ningún otro lado. */} + {maxSelect !== null && (

Elegí hasta {maxSelect} opciones {value.length > 0 && ` · ${value.length}/${maxSelect} seleccionadas`}

- ) : ( -

Podés marcar más de una opción

)}
{options.map((opt) => {