From ec49a1b087548add7c5ef16e4c49a9f52f58a00e Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Tue, 22 Nov 2022 10:03:15 +0100
Subject: [PATCH] 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.
---
 .changeset/stale-buses-lie.md                  | 5 +++++
 packages/styles/src/components/datepicker.scss | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/stale-buses-lie.md

diff --git a/.changeset/stale-buses-lie.md b/.changeset/stale-buses-lie.md
new file mode 100644
index 0000000000..e93deec05f
--- /dev/null
+++ 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
index 6e2131b618..7840745972 100644
--- 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 {