From ef351cadf255502c9ce846a78ab5a6e52e6bd327 Mon Sep 17 00:00:00 2001
From: Pingfan Hu <pingfan0727@gmail.com>
Date: Wed, 25 Sep 2024 13:31:03 -0400
Subject: [PATCH] narrow screens now have buttons vertically aligned

---
 R/ui.R                  | 6 ++++--
 inst/css/surveydown.css | 7 +++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/R/ui.R b/R/ui.R
index ea48120a..cf8f3c38 100644
--- a/R/ui.R
+++ b/R/ui.R
@@ -227,7 +227,8 @@ sd_question <- function(
             label      = markdown_to_html(label),
             choices    = list_name_md_to_html(option),
             direction  = direction,
-            selected   = character(0)
+            selected   = character(0),
+            class      = "narrow-screen-vertical"
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("
@@ -244,7 +245,8 @@ sd_question <- function(
             choices    = list_name_md_to_html(option),
             direction  = direction,
             individual = individual,
-            justified = FALSE
+            justified  = FALSE,
+            class      = "narrow-screen-vertical"
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("
diff --git a/inst/css/surveydown.css b/inst/css/surveydown.css
index 75ce4699..c6835aa4 100644
--- a/inst/css/surveydown.css
+++ b/inst/css/surveydown.css
@@ -102,6 +102,13 @@ p, .form-group, .control-label {
   z-index: 2;
 }
 
+@media screen and (max-width: 767px) {
+  .radio-group-buttons .btn-group-container-sw,
+  .checkbox-group-buttons .btn-group-container-sw {
+    flex-direction: column;
+  }
+}
+
 /* Date range styling*/
 .shiny-date-range-input .input-group-addon {
   background: none;