[#2685] styling

src/open_inwoner/accounts/templates/accounts/registration_necessary.html

@@ -8,7 +8,7 @@
             {% get_solo 'configurations.SiteConfiguration' as config %}
             <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
             {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
-            <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
+            <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form form__choice-list" novalidate>
                 {% csrf_token %}
 
                 {% if form.first_name %}

src/open_inwoner/components/templates/components/Form/ChoiceListItem.html

@@ -4,13 +4,13 @@
 
 <li class="choice-list__item">
     <label class="choice-list__label {% if bold_label %}choice-list__label--large{% endif %}" for="id_{{ name }}_{{ index }}">
-        {% if icon_symbol %}
-            {% icon icon_symbol outlined=True extra_classes="icon--large" %}
-        {% endif %}
         <input type="{% if input_type_radio %}radio{% else %}checkbox{% endif %}" class="choice-list__radio" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
         <div class="choice-list__content">
             {% if bold_label %}<h2 class="choice-list__heading">Kies {{ choice.1 }}</h2>{% endif %}
             <p class="choice-list__p">{{ choice.1 }}</p>
         </div>
+        {% if icon_symbol %}
+            {% icon icon_symbol outlined=True extra_classes="icon--large" %}
+        {% endif %}
     </label>
 </li>

src/open_inwoner/scss/components/File/File.scss

@@ -80,7 +80,6 @@
   }
 
   &__file + .file__data {
-    background-color: greenyellow;
     margin-top: var(--spacing-small);
   }
 

src/open_inwoner/scss/components/Form/ChoiceList.scss

@@ -60,11 +60,31 @@
     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: auto auto;
-    gap: var(--spacing-extra-large);
+    grid-row-gap: 0;
+    grid-column-gap: var(--spacing-extra-large);
     width: calc(100% - var(--spacing-extra-large));
 
+    .choice-list__content {
+      max-width: 100%;
+    }
+
     & .choice-list__label {
       flex-direction: column-reverse;
+      text-align: center;
+
+      [class*='icons'] {
+        margin-bottom: var(--spacing-small);
+      }
+
+      .choice-list__content {
+        margin-bottom: var(--spacing-large);
+      }
+    }
+
+    @media (max-width: 500px) {
+      display: flex;
+      row-gap: var(--spacing-medium);
+      width: 100%;
     }
   }
 
@@ -120,7 +140,6 @@
     border-top: 1px solid var(--color-gray-light);
     margin: var(--spacing-large) 0 0 0;
     padding: var(--spacing-large) 0 0 0;
-    max-width: var(--form-width);
 
     .choice-list__p {
       margin: var(--spacing-large) 0 0 0;
@@ -152,7 +171,6 @@
 
   &-multiple__item {
     border: var(--border-width-thin) solid var(--color-white);
-    max-width: var(--form-width);
   }
 
   &-multiple__item .choice-list-multiple__content .checkbox__label {

src/open_inwoner/scss/components/Form/Form.scss

@@ -285,6 +285,13 @@
     cursor: default;
     pointer-events: none;
   }
+
+  &__choice-list {
+    @media (max-width: 767px) {
+      gap: var(--spacing-large);
+      max-width: var(--form-width);
+    }
+  }
 }
 
 /// Specific forms

src/open_inwoner/templates/pages/kvk/branches.html

@@ -5,7 +5,7 @@
     {% render_grid %}
         {% render_column start=4 span=6 %}
             <h1 class="utrecht-heading-1" id="title">{% trans "Log in" %}</h1>
-            <form method="POST" id="eherkenning-branch-form" class="form">
+            <form method="POST" id="eherkenning-branch-form" class="form  form__choice-list">
                 {% csrf_token %}
                 {% if form.branch_number.errors %}
                     {% errors errors=form.branch_number.errors %}

src/open_inwoner/templates/pages/profile/notifications.html

@@ -8,7 +8,7 @@ <h1 class="utrecht-heading-1" id="title">
             {% trans "Notificatie voorkeuren" %}
         </h1>
 
-        <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate>
+        <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form form__choice-list" novalidate>
             {% csrf_token %}
 
             {% if form.any_notifications_enabled %}