From ebe14e2cd885cb2c892f384d58e0bd7caf3f79a1 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 6 Mar 2025 18:23:15 +0200
Subject: [PATCH] fix(Calendar) days row height for fluent anf bootstrap theme

Also change the way Bootstrap header separator is implemented in order to make it work correctly after the fixes for the row height.
---
 .../shared/bootstrap/days-view.bootstrap.scss | 20 +++++++++++--------
 .../shared/fluent/days-view.fluent.scss       | 10 +++-------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
index 3ac17161f..251139c27 100644
--- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
+++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
@@ -20,7 +20,16 @@ $border-size: rem(1px);
 
 [part~='days-row'][part~='first'] {
     background: var-get($theme, 'header-background');
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        inset-block-start: 100%;
+        height: rem(1px);
+        background: var-get($theme, 'border-color');
+    }
 }
 
 [part~='week-number'] {
@@ -37,7 +46,6 @@ $border-size: rem(1px);
 
     &::after {
         width: var-get($theme, 'size');
-        height: calc(var-get($theme, 'size') / 2);
         inset-block-end: 100%;
         background: var-get($theme, 'week-number-background');
     }
@@ -73,6 +81,8 @@ $border-size: rem(1px);
 
 [part~='date'] {
     height: var-get($theme, 'size');
+    border-top: $border-size solid transparent;
+    border-bottom: $border-size solid transparent;
 
     &[part~='range'],
     &[part~='range'][part~='preview'] {
@@ -121,12 +131,6 @@ $border-size: rem(1px);
     }
 }
 
-[part~='date'],
-[part~='week-number'] {
-    border-top: $border-size solid transparent;
-    border-bottom: $border-size solid transparent;
-}
-
 [part~='date-inner'] {
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');
diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
index 3bd4b678a..3bc10c4d0 100644
--- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
+++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
@@ -11,6 +11,8 @@ $row-gap: rem(6px);
 
 [part~='date'] {
     height: var-get($theme, 'size');
+    border-top: $border-size solid transparent;
+    border-bottom: $border-size solid transparent;
 }
 
 [part~='date'],
@@ -18,12 +20,6 @@ $row-gap: rem(6px);
     border-radius: var-get($theme, 'date-border-radius');
 }
 
-[part~='date'],
-[part~='week-number'] {
-    border-top: $border-size solid transparent;
-    border-bottom: $border-size solid transparent;
-}
-
 [part~='date-inner'],
 [part~='week-number-inner'] {
     border: $border-size solid transparent;
@@ -31,6 +27,7 @@ $row-gap: rem(6px);
 
 [part~='week-number'] {
     width: var-get($theme, 'size');
+    height: var-get($theme, 'size');
 }
 
 [part~='week-number-inner'] {
@@ -43,7 +40,6 @@ $row-gap: rem(6px);
 
     &::after {
         width: var-get($theme, 'size');
-        height: calc(var-get($theme, 'size') / 2);
         background: var-get($theme, 'week-number-background');
         border-inline-start: rem(1px) solid var-get($theme, 'week-number-background');
         border-inline-end: rem(1px) solid var-get($theme, 'week-number-background');