Correctly align radio buttons with their labels

We were using a `height: $line-height` property for this task. One of
the disadvantages of this approach is that things don't look so great
when the label expands over more than one line.

Back when we added that property, browser support for flex layouts
wasn't that great. Now there's universal support for it, so we can use
it instead.

app/assets/stylesheets/admin.scss

@@ -168,6 +168,10 @@ $table-header:   #ecf1f6;
       font-weight: bold;
     }
 
+    .radio {
+      @include radio-or-checkbox-and-label-alignment;
+    }
+
     select {
       height: $input-height;
     }

app/assets/stylesheets/admin/dashboard/actions/form.scss

@@ -0,0 +1,11 @@
+.dashboard-action-form {
+  .collection-radio-buttons {
+    column-gap: $line-height;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+  }
+}

app/assets/stylesheets/admin/legislation/draft_versions/form.scss

@@ -85,4 +85,12 @@
       }
     }
   }
+
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+
+    span {
+      margin-left: 1ch;
+    }
+  }
 }

app/assets/stylesheets/admin/locales/form.scss

@@ -1,6 +1,6 @@
 .admin .locales-form {
   label {
-    display: table;
+    @include radio-or-checkbox-and-label-alignment;
   }
 
   select {

app/assets/stylesheets/admin/site_customization/pages/form.scss

@@ -0,0 +1,5 @@
+.site-customization-pages-form {
+  .radio-and-label {
+    @include radio-or-checkbox-and-label-alignment;
+  }
+}

app/assets/stylesheets/admin/tenants/form.scss

@@ -5,7 +5,7 @@
   }
 
   .radio-and-label {
-    display: flex;
+    @include radio-or-checkbox-and-label-alignment;
     margin-bottom: calc($line-height / 3);
 
     &:last-of-type {

app/assets/stylesheets/layout.scss

@@ -909,7 +909,6 @@ form {
   }
 
   [type="radio"] {
-    height: $line-height !important;
     vertical-align: top;
 
     + label {

app/assets/stylesheets/mixins/forms.scss

@@ -199,3 +199,9 @@
     text-transform: uppercase;
   }
 }
+
+@mixin radio-or-checkbox-and-label-alignment {
+  align-items: baseline;
+  display: flex;
+  max-width: max-content;
+}

app/components/admin/dashboard/actions/form_component.html.erb

@@ -3,13 +3,15 @@
     <%= render "shared/errors" %>
 
     <div class="row expanded">
-      <fieldset class="small-12 medium-4 column">
+      <fieldset class="small-12 column">
         <legend><%= attribute_name(:action_type) %></legend>
-        <% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
+        <div class="collection-radio-buttons">
-          <span class="margin-right">
+          <% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
-            <%= f.radio_button :action_type, action_type_value %>
+            <span class="radio-and-label">
-          </span>
+              <%= f.radio_button :action_type, action_type_value %>
-        <% end %>
+            </span>
+          <% end %>
+        </div>
       </fieldset>
 
       <div class="small-12 column margin-top">

app/components/admin/legislation/draft_versions/form_component.html.erb

@@ -63,9 +63,10 @@
     <fieldset class="small-12 column">
       <legend><%= attribute_name(:status) %></legend>
       <% ::Legislation::DraftVersion::VALID_STATUSES.each do |status| %>
-        <%= f.radio_button :status, status %>
+        <span class="radio-and-label">
-        <span class="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
+          <%= f.radio_button :status, status %>
-        <br>
+          <span class="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
+        </span>
       <% end %>
     </fieldset>
 

app/components/admin/site_customization/pages/form_component.html.erb

@@ -13,8 +13,9 @@
       <fieldset>
         <legend><%= attribute_name(:status) %></legend>
         <% ::SiteCustomization::Page::VALID_STATUSES.each do |status| %>
-          <%= f.radio_button :status, status %>
+          <span class="radio-and-label">
-          <br>
+            <%= f.radio_button :status, status %>
+          </span>
         <% end %>
       </fieldset>