fix(datepicker): alignment of days when outside="hidden" (#793)

When outside days get hidden, they collapse in their flex context and change the alignment of the first days of the month. Adding flex-grow 1 ensures the hidden days still keep their space so the day labels on top match correctly with the calendar days.
swisspost · Nov 22, 2022 · ec49a1b · ec49a1b
1 parent 8ca017a
commit ec49a1b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/stale-buses-lie.md b/.changeset/stale-buses-lie.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+When outside days get hidden, they collapse in their flex context and change the alignment of the first days of the month. Adding flex-grow 1 ensures the hidden days still keep their space so the day labels on top match correctly with the calendar days.
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
@@ -89,6 +89,10 @@ span.ngb-dp-navigation-chevron {
 .ngb-dp-day {
   width: auto !important;
   height: auto !important;
+
+  &.hidden {
+    flex-grow: 1;
+  }
 }
 
 .ngb-dp-day > .btn-light {