From d063475769c8494e7f67ec33a9eb2dc2029b6bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 5 Nov 2025 19:02:58 +0100
Subject: [PATCH] Use CSS instead of utility classes in options table

This way we make it easier to customize this component. In this specific
case, ideally we'd remove some of the CSS as well. For now we're leaving
it as it was for compatibility reasons.
---
 .../admin/polls/questions/options/table.scss  | 27 +++++++++++++++++--
 .../options/table_component.html.erb          | 20 +++++++-------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/admin/polls/questions/options/table.scss b/app/assets/stylesheets/admin/polls/questions/options/table.scss
index b260dd0f8..381f959df 100644
--- a/app/assets/stylesheets/admin/polls/questions/options/table.scss
+++ b/app/assets/stylesheets/admin/polls/questions/options/table.scss
@@ -1,5 +1,28 @@
 .admin .poll-question-options-table {
-  .break {
-    word-break: break-word;
+  margin-top: $line-height;
+
+  td {
+    &:not(:last-child) {
+      vertical-align: top;
+    }
+
+    &.description {
+      word-break: break-word;
+    }
+  }
+
+  th {
+    &.description {
+      @include breakpoint(medium) {
+        width: calc(100% * 7 / 12);
+      }
+    }
+  }
+
+  td,
+  th {
+    &.association-count {
+      text-align: center;
+    }
   }
 }
diff --git a/app/components/admin/poll/questions/options/table_component.html.erb b/app/components/admin/poll/questions/options/table_component.html.erb
index 62aea0cfa..4f8ca31c8 100644
--- a/app/components/admin/poll/questions/options/table_component.html.erb
+++ b/app/components/admin/poll/questions/options/table_component.html.erb
@@ -1,12 +1,12 @@
-<table class="margin-top poll-question-options-table">
+<table class="poll-question-options-table">
   <caption><%= t("admin.questions.show.valid_answers") %></caption>
   <thead>
     <tr>
       <th><%= t("admin.questions.show.answers.title") %></th>
-      <th scope="col" class="medium-7"><%= t("admin.questions.show.answers.description") %></th>
-      <th scope="col" class="text-center"><%= t("admin.questions.show.answers.images") %></th>
-      <th scope="col" class="text-center"><%= t("admin.questions.show.answers.documents") %></th>
-      <th scope="col" class="text-center"><%= t("admin.questions.show.answers.videos") %></th>
+      <th scope="col" class="description"><%= t("admin.questions.show.answers.description") %></th>
+      <th scope="col" class="association-count"><%= t("admin.questions.show.answers.images") %></th>
+      <th scope="col" class="association-count"><%= t("admin.questions.show.answers.documents") %></th>
+      <th scope="col" class="association-count"><%= t("admin.questions.show.answers.videos") %></th>
       <th><%= t("admin.actions.actions") %></th>
     </tr>
   </thead>
@@ -14,21 +14,21 @@
   <tbody data-js-url="<%= admin_question_options_order_options_path(question.id) %>">
     <% question.question_options.each do |option| %>
       <tr id="<%= dom_id(option) %>" class="poll_question_option" data-option-id="<%= option.id %>">
-        <td class="align-top"><%= option.title %></td>
-        <td class="align-top break"><%= wysiwyg(option.description) %></td>
-        <td class="align-top text-center">
+        <td><%= option.title %></td>
+        <td class="description"><%= wysiwyg(option.description) %></td>
+        <td class="association-count">
           (<%= option.images.count %>)
           <br>
           <%= link_to t("admin.questions.show.answers.images_list"),
                       admin_option_images_path(option) %>
         </td>
-        <td class="align-top text-center">
+        <td class="association-count">
           (<%= option.documents.count rescue 0 %>)
           <br>
           <%= link_to t("admin.questions.show.answers.documents_list"),
                       admin_option_documents_path(option) %>
         </td>
-        <td class="align-top text-center">
+        <td class="association-count">
           (<%= option.videos.count %>)
           <br>
           <%= link_to t("admin.questions.show.answers.video_list"),