Merge pull request #4770 from uswds/al-date-picker-month

USWDS: Date Picker - Update month-label width for mobile
uswds · Jun 17, 2022 · 7a5db34 · 7a5db34
2 parents 7b892ff + 03f1b4c
commit 7a5db34
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/packages/usa-date-picker/src/styles/_usa-date-picker.scss b/packages/usa-date-picker/src/styles/_usa-date-picker.scss
@@ -335,8 +335,15 @@ $navigate_far_next: map-merge(
 }
 
 .usa-date-picker__calendar__month-label {
-  flex: 4;
-  text-align: center;
+  @include at-media-max("mobile") {
+    min-width: 100%;
+    order: -1;
+  }
+
+  @include at-media("mobile") {
+    flex: 4;
+    text-align: center;
+  }
 }
 
 .usa-date-picker__calendar__year-selection,
@@ -346,11 +353,26 @@ $navigate_far_next: map-merge(
   height: 100%;
   padding: 8px 4px;
   width: auto;
+
+  @include at-media-max("mobile") {
+    padding-bottom: 0;
+    padding-top: 12px;
+  }
 }
 
 // Date Picker - Month Selection View
 .usa-date-picker__calendar__month-picker {
   padding: 20px 5px;
+
+  @include at-media-max("mobile") {
+    padding-bottom: 12px;
+    padding-top: 12px;
+
+    tr {
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
 
 .usa-date-picker__calendar__month {