From 77c8e2d264b9e7e665184c336127411088644a63 Mon Sep 17 00:00:00 2001
From: Pingfan Hu <pingfan0727@gmail.com>
Date: Tue, 24 Sep 2024 18:08:44 -0400
Subject: [PATCH] button styling updated

---
 R/ui.R                  | 13 +++++++------
 inst/css/surveydown.css | 21 ++++++++-------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/R/ui.R b/R/ui.R
index da1ad099..045825ff 100644
--- a/R/ui.R
+++ b/R/ui.R
@@ -223,12 +223,13 @@ sd_question <- function(
     } else if (type == "mc_buttons") {
 
         output <- shinyWidgets::radioGroupButtons(
-            inputId  = id,
-            label    = markdown_to_html(label),
-            choices  = list_name_md_to_html(option),
-            selected = character(0),
-            width    = width,
-            status   = status
+            inputId    = id,
+            label      = markdown_to_html(label),
+            choices    = list_name_md_to_html(option),
+            direction  = direction,
+            selected   = character(0),
+            width      = width,
+            status     = status
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("
diff --git a/inst/css/surveydown.css b/inst/css/surveydown.css
index f41ae6d5..c812551f 100644
--- a/inst/css/surveydown.css
+++ b/inst/css/surveydown.css
@@ -49,12 +49,14 @@ p, .form-group, .control-label {
 }
 
 /* Button group styling */
-.radio-group-buttons,
-.checkbox-group-buttons,
-.btn-group-container-sw {
-  display: inline-flex;
-  overflow: hidden;
-  border-radius: 4px;
+.radio-group-buttons .btn-group-container-sw,
+.checkbox-group-buttons .btn-group-container-sw {
+  display: flex;
+  row-gap: 5px;
+}
+
+.checkbox-group-buttons .btn-group-container-sw {
+  column-gap: 5px;
 }
 
 .radio-group-buttons .btn,
@@ -64,8 +66,6 @@ p, .form-group, .control-label {
   background-color: color-mix(in srgb, var(--theme-color) 10%, white);
   color: var(--theme-color);
   transition: all 0.3s ease;
-  margin-right: -1px;
-  position: relative;
 }
 
 .radio-group-buttons .btn:hover,
@@ -161,11 +161,6 @@ p, .form-group, .control-label {
   flex-wrap: wrap;
 }
 
-/* Styles for multiple choice buttons (gap: 0.5rem) */
-.checkbox-group-buttons .btn-group-container-sw {
-  gap: 0.5rem;
-}
-
 /* Page Navigation Buttons */
 .btn-primary,
 .btn-primary:hover,