Tweak survey styles (forem#22762)

Author: benhalpern

app/assets/stylesheets/ltags/SurveyTag.scss

@@ -12,7 +12,7 @@
   background-color: var(--theme-container-background, white);
   border-radius: var(--radius-lg, 5px);
   box-sizing: border-box;
-  padding: 15px 25px 25px;
+  padding: calc(4px + 0.6vw) calc(7px + 0.6vw) calc(7px + 0.6vw);
   font-family: var(--ff-sans-serif);
 
   .survey-title {
@@ -30,13 +30,15 @@
   margin-bottom: 1em;
 
   h3 {
-    margin: 15px 0px 20px !important;
+    margin: 15px 0px 16px !important;
     font-size: 1.05em !important;
     font-weight: 500 !important;
     color: var(--body-color);
-    padding: 28px 0;
-    border-bottom: 1px solid var(--form-border, #eee);
-    border-top: 1px solid var(--form-border, #eee);
+    padding: var(--su-2) var(--su-2) !important;
+    border: 1px solid var(--form-border, #eee);
+    border-radius: var(--radius-md, 5px);
+    background-color: rgba(0, 0, 0, 0.05);
+
   }
 
   &.survey-poll-long-question {
@@ -56,42 +58,19 @@
 
   &.survey-poll-answers-grid {
     display: grid;
-    grid-template-rows: repeat(2, auto);
-    grid-auto-flow: column;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-flow: row;
     gap: 10px;
-    overflow-x: auto;
-    padding-bottom: 8px;
-
-    /* Custom scrollbar for horizontal grid */
-    &::-webkit-scrollbar {
-      height: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.05);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-    }
 
     .survey-poll-option {
-      padding: 8px 12px;
-      font-size: 0.9em;
-      min-width: max-content;
+      padding: 3px 8px;
+      font-size: calc(0.8em + 0.1vw);
 
       .option-text {
-        white-space: nowrap;
+        white-space: normal;
       }
     }
 
-    @media (max-width: $breakpoint-m) {
-      grid-template-rows: none;
-      grid-auto-flow: row;
-      grid-template-columns: 1fr;
-      overflow-x: visible;
-    }
   }
 
   .survey-poll-option {

app/views/surveys/show.html.erb

@@ -51,42 +51,19 @@
   /* Sharing styles with SurveyTag.scss aesthetic but adapted for standalone view */
   .survey-poll-answers-grid {
     display: grid !important;
-    grid-template-rows: repeat(2, auto) !important;
-    grid-auto-flow: column !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    grid-auto-flow: row !important;
     gap: 10px !important;
-    overflow-x: auto !important;
-    padding-bottom: 8px !important;
     flex-direction: row !important; /* Override column for flex containers */
   }
 
-  .survey-poll-answers-grid::-webkit-scrollbar {
-    height: 4px;
-  }
-  .survey-poll-answers-grid::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
-  }
-  .survey-poll-answers-grid::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-  }
-
   .survey-poll-answers-grid .survey-poll-option {
-    padding: 8px 12px !important;
-    min-width: max-content !important;
+    padding: 10px 15px !important;
   }
 
   .survey-poll-answers-grid .option-text,
   .survey-poll-answers-grid button {
-    font-size: 0.9em !important;
-    white-space: nowrap !important;
-  }
-
-  @media (max-width: 640px) {
-    .survey-poll-answers-grid {
-      grid-template-rows: none !important;
-      grid-auto-flow: row !important;
-      grid-template-columns: 1fr !important;
-      overflow-x: visible !important;
-    }
+    font-size: 0.95em !important;
+    white-space: normal !important;
   }
 </style>