Merge pull request #1748 from GSA/1747-adjust-button-widths-mobile

1747 adjust button widths mobile
GSA · Aug 30, 2024 · f8a6609 · f8a6609
2 parents 33c9964 + 903654b
commit f8a6609
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/benefit-finder/src/shared/components/LifeEventSection/_index.scss b/benefit-finder/src/shared/components/LifeEventSection/_index.scss
@@ -35,13 +35,28 @@
     min-width: rem(120px);
   }
 
-  .bf-usa-button:first-of-type {
-    margin-right: space.$space-lg-plus;
+  .bf-usa-modal-group {
+    width: 100%;
   }
 
   button,
   .bf-usa-modal-group a {
-    margin-bottom: space.$space-md;
+    margin: 0;
+  }
+
+  @media (width >= $tablet) {
+    .bf-usa-button:first-of-type {
+      margin-right: space.$space-lg-plus;
+    }
+
+    .bf-usa-modal-group {
+      width: auto;
+    }
+
+    button,
+    .bf-usa-modal-group a {
+      margin-bottom: space.$space-md;
+    }
   }
 }
 

diff --git a/benefit-finder/src/shared/styles/breakpoints/_index.scss b/benefit-finder/src/shared/styles/breakpoints/_index.scss
@@ -1,3 +1,4 @@
 @use '../functions/index.scss' as *;
 
 $desktop: rem(1049px);
+$tablet: rem(479px);