Survey UI fixes for label

poll/public/css/poll.css

@@ -160,6 +160,15 @@ li.poll-result .poll-image {
     border: 0;
 }
 
+.survey-table td{
+    text-align: center;
+}
+
+.survey-table td label{
+    display: block;
+    padding: 5px 0;
+}
+
 .survey-table td, .survey-table th {
     border: 1px solid #CCC;
     border-top: 0;
@@ -303,6 +312,9 @@ th.survey-answer {
         visibility: hidden;
     }
 
+    .survey-table .survey-option .visible-mobile-only{
+        width: calc(100% - 20px);
+    }
     .survey-table .survey-option{
         display: block;
         border: 1px solid #ccc;
@@ -326,7 +338,10 @@ th.survey-answer {
 
     .survey-table .survey-option label{
         text-align: left;
-        width: calc(100% - 18px);
         padding: 8px 0;
     }
+
+    .survey-table tbody tr:last-child td{
+        border-bottom: 1px solid #ccc;
+    }
 }

poll/public/html/survey.html

@@ -25,21 +25,21 @@
                     </th>
                 {% for answer, label in answers %}
                     <td class="survey-option" headers="poll-{{block_id}}-{{key}} poll-{{block_id}}-{{answer}}">
-                        <input type="radio"
-                               name="{{key}}"
-                               id="{{key}}-{{forloop.counter}}"
-                               value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
-                               {% if question.img_alt %}
-                                  aria-label="{{question.img_alt}} {{label}}"
-                               {% else %}
-                                  aria-label="{{question.label|striptags}} {{label}}"
-                               {% endif %}
-                               />
                         {% with answer_count=forloop.counter %}
                             {% for answer, label in answers %}
                                 {% if forloop.counter == answer_count %}
-                                    <label class="visible-mobile-only" for="{{key}}-{{answer_count}}">
-                                        {{label}}
+                                    <label for="{{key}}-{{answer_count}}">
+                                        <input type="radio"
+                                               name="{{key}}"
+                                               id="{{key}}-{{forloop.counter}}"
+                                               value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
+                                               {% if question.img_alt %}
+                                               aria-label="{{question.img_alt}} {{label}}"
+                                               {% else %}
+                                               aria-label="{{question.label|striptags}} {{label}}"
+                                               {% endif %}
+                                        />
+                                        <span class="visible-mobile-only">{{label}}</span>
                                     </label>
                                 {% endif %}
                             {% endfor %}