From b4eba055c748a1c274ee3f1ad5bf0692b8fb1e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 9 Jul 2025 14:28:11 +0200
Subject: [PATCH] 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                  |  4 ++++
 .../stylesheets/admin/dashboard/actions/form.scss  | 11 +++++++++++
 .../admin/legislation/draft_versions/form.scss     |  8 ++++++++
 app/assets/stylesheets/admin/locales/form.scss     |  2 +-
 .../admin/site_customization/pages/form.scss       |  5 +++++
 app/assets/stylesheets/admin/tenants/form.scss     |  2 +-
 app/assets/stylesheets/layout.scss                 |  1 -
 app/assets/stylesheets/mixins/forms.scss           |  6 ++++++
 .../dashboard/actions/form_component.html.erb      | 14 ++++++++------
 .../draft_versions/form_component.html.erb         |  7 ++++---
 .../pages/form_component.html.erb                  |  5 +++--
 11 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/dashboard/actions/form.scss
 create mode 100644 app/assets/stylesheets/admin/site_customization/pages/form.scss

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 813118fac..29bf4ac6e 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/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;
     }
diff --git a/app/assets/stylesheets/admin/dashboard/actions/form.scss b/app/assets/stylesheets/admin/dashboard/actions/form.scss
new file mode 100644
index 000000000..aac8f43a1
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/admin/legislation/draft_versions/form.scss b/app/assets/stylesheets/admin/legislation/draft_versions/form.scss
index 2d8232782..7764ccbf7 100644
--- a/app/assets/stylesheets/admin/legislation/draft_versions/form.scss
+++ b/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;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/admin/locales/form.scss b/app/assets/stylesheets/admin/locales/form.scss
index ec965cfd2..00eab79db 100644
--- a/app/assets/stylesheets/admin/locales/form.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/admin/site_customization/pages/form.scss b/app/assets/stylesheets/admin/site_customization/pages/form.scss
new file mode 100644
index 000000000..0788cd01d
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/admin/tenants/form.scss b/app/assets/stylesheets/admin/tenants/form.scss
index eed01d51f..7b7f52025 100644
--- a/app/assets/stylesheets/admin/tenants/form.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c6ff179c9..b3eae06c4 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -909,7 +909,6 @@ form {
   }
 
   [type="radio"] {
-    height: $line-height !important;
     vertical-align: top;
 
     + label {
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index df105c36d..683d19783 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/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;
+}
diff --git a/app/components/admin/dashboard/actions/form_component.html.erb b/app/components/admin/dashboard/actions/form_component.html.erb
index 67244e9ed..51eedf7c6 100644
--- a/app/components/admin/dashboard/actions/form_component.html.erb
+++ b/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| %>
-          <span class="margin-right">
-            <%= f.radio_button :action_type, action_type_value %>
-          </span>
-        <% end %>
+        <div class="collection-radio-buttons">
+          <% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
+            <span class="radio-and-label">
+              <%= f.radio_button :action_type, action_type_value %>
+            </span>
+          <% end %>
+        </div>
       </fieldset>
 
       <div class="small-12 column margin-top">
diff --git a/app/components/admin/legislation/draft_versions/form_component.html.erb b/app/components/admin/legislation/draft_versions/form_component.html.erb
index 6d468e6d5..8c928ba55 100644
--- a/app/components/admin/legislation/draft_versions/form_component.html.erb
+++ b/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="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
-        <br>
+        <span class="radio-and-label">
+          <%= f.radio_button :status, status %>
+          <span class="help-text"><%= t("admin.legislation.draft_versions.form.hints.status.#{status}") %></span>
+        </span>
       <% end %>
     </fieldset>
 
diff --git a/app/components/admin/site_customization/pages/form_component.html.erb b/app/components/admin/site_customization/pages/form_component.html.erb
index 4f0f97466..141ed75b0 100644
--- a/app/components/admin/site_customization/pages/form_component.html.erb
+++ b/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 %>
-          <br>
+          <span class="radio-and-label">
+            <%= f.radio_button :status, status %>
+          </span>
         <% end %>
       </fieldset>