feat: calmer questionnaire form with selects and clickable answer rows

templates/forms.html.twig

@@ -207,6 +207,23 @@
     </fieldset>
 {%- endblock questionnaire_section_row -%}
 
+{#
+ # A questionnaire's radio or checkbox list: each answer a whole clickable row that lights up on
+ # hover and stays marked once chosen, so it is plain where to click. Questionnaire-only; the
+ # app's other choice lists keep choice_widget_expanded.
+ #}
+{%- block questionnaire_choice_widget -%}
+    <div class="flex flex-col gap-y-1" {{ block('widget_container_attributes') }}>
+        {%- for child in form -%}
+            <label for="{{ child.vars.id }}"
+                   class="{{ html_classes('flex cursor-pointer select-none items-center gap-x-3 rounded-md px-3 py-2 text-sm ring-1 ring-inset transition-colors hover:bg-gray-100 has-[:checked]:bg-primary/10 has-[:checked]:ring-primary', { 'ring-red-500': errors|length, 'ring-gray-200': not errors|length }) }}">
+                {{- form_widget(child, { attr: { class: 'h-4 w-4 shrink-0 border-gray-300 text-primary focus:ring-primary' } }) -}}
+                <span class="text-gray-900">{{ child.vars.label }}</span>
+            </label>
+        {%- endfor -%}
+    </div>
+{%- endblock questionnaire_choice_widget -%}
+
 {# A 1-5 rating as a row of buttons, the radios themselves hidden. #}
 {%- block questionnaire_rating_widget -%}
     <div class="flex gap-x-2" role="radiogroup">