From 4b7700b6f5c1ef5b1f386a39d09a6f16a09ad8df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 12 Aug 2025 15:16:59 +0200
Subject: [PATCH] Add a border for each question in the poll form

This way polls look more similar to the way they did when the answers
were buttons instead of checkboxes or radio buttons.

Note the styling is tricky because we need to add a `float` property to
the legend so it's actually inside the fieldset. This forces us to add a
`::before` pseudo-element in order to add margin between the legend and
the first label. Another option would be:

```
legend {
  &:has(+ label) {
    margin-bottom: calc($line-height / 2);
  }

  + label {
    clear: $global-left;
  }
}
```

But the `:has` pseudo-class isn't universally supported yet, and we'd
still have to add `margin-top` to the first label when it comes after a
`.help-text` element.

Due to the presence of the border, we're increasing the margin between
elements a little bit.

Note that adding a pseudoelement to the label is a consequence of adding
the `float` property to the legend, so we're changing the order of the
code so the styles for `legend` appear before the styles in `label`.
---
 app/assets/stylesheets/polls/form.scss        | 41 +++++++++++++++----
 .../questions/question_component.html.erb     |  2 +-
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/polls/form.scss b/app/assets/stylesheets/polls/form.scss
index e85879c24..f6129dbf2 100644
--- a/app/assets/stylesheets/polls/form.scss
+++ b/app/assets/stylesheets/polls/form.scss
@@ -1,11 +1,8 @@
 .poll-form {
-  label {
-    @include radio-or-checkbox-and-label-alignment;
-    font-weight: normal;
-
-    &:first-of-type {
-      margin-top: calc($line-height / 2);
-    }
+  fieldset {
+    border: 1px solid $border;
+    border-radius: $global-radius;
+    padding: $line-height;
   }
 
   fieldset + fieldset {
@@ -14,15 +11,45 @@
 
   legend {
     @include header-font-size(h3);
+    float: $global-left;
     margin-bottom: 0;
+
+    + * {
+      clear: $global-left;
+    }
+  }
+
+
+  label {
+    @include radio-or-checkbox-and-label-alignment;
+    font-weight: normal;
+
+    &:first-of-type::before {
+      content: "\A";
+      margin-top: calc($line-height / 2);
+      white-space: pre;
+    }
   }
 
   .help-text {
+    display: block;
     font-size: 1em;
     font-style: normal;
     font-weight: bold;
   }
 
+  .read-more-links {
+    margin-top: calc($line-height / 2);
+
+    * {
+      margin-bottom: 0;
+    }
+
+    * + * {
+      margin-top: calc($line-height / 4);
+    }
+  }
+
   [type=submit] {
     margin-top: calc($line-height * 3 / 4);
   }
diff --git a/app/components/polls/questions/question_component.html.erb b/app/components/polls/questions/question_component.html.erb
index b4c5ea671..075fc4dc1 100644
--- a/app/components/polls/questions/question_component.html.erb
+++ b/app/components/polls/questions/question_component.html.erb
@@ -14,7 +14,7 @@
   <% end %>
 
   <% if question.options_with_read_more? %>
-    <div>
+    <div class="read-more-links">
       <p><%= t("poll_questions.read_more_about") %></p>
       <p><%= options_read_more_links %></p>
     </div>