wip

wwwroot/css/calendar-base-css.css

@@ -15,6 +15,7 @@
   --snap-interval: 15;
   --day-column-min-width: 250px;
   --week-days: 7;
+  --header-height: 80px;
   
   /* Time boundaries - Default fallback values */
   --day-start-hour: 0;

wwwroot/css/calendar-layout-css.css

@@ -39,7 +39,7 @@ swp-calendar-nav {
 swp-calendar-container {
   display: grid;
   grid-template-columns: 60px 1fr 20px;
-  grid-template-rows: 110px 1fr 20px;
+  grid-template-rows: auto 1fr 20px;
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -50,7 +50,7 @@ swp-calendar-container {
 swp-header-spacer {
   grid-column: 1;
   grid-row: 1;
-  height: 110px; /* Same as week header height */
+  height: var(--header-height); /* Use CSS variable for consistent height */
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -63,7 +63,7 @@ swp-header-spacer {
 swp-right-header-spacer {
   grid-column: 3;
   grid-row: 1;
-  height: 110px; /* Same as week header height */
+  height: var(--header-height); /* Use CSS variable for consistent height */
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
@@ -76,7 +76,7 @@ swp-week-container {
   grid-column: 2 / 3;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: 110px 1fr;
+  grid-template-rows: auto 1fr;
   position: relative;
   width: 100%;
   transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -211,18 +211,18 @@ swp-hour-marker::after {
   pointer-events: none;
 }
 
-/* Week header with 2 rows */
+/* Week header - dynamic height based on content */
 swp-week-header {
   display: grid;
   grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
-  grid-template-rows: 80px 30px; /* Row 1: day headers, Row 2: orange sections */
+  grid-template-rows: var(--header-height) auto; /* Row 1: use CSS variable, Row 2: auto-sized for all-day events */
   min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
-  height: 110px; /* Updated height: 80px + 30px */
+  height: auto; /* Dynamic height based on content */
 }
 
 swp-day-header {

wwwroot/css/calendar.css

@@ -167,16 +167,7 @@ swp-view-button[data-active="true"] {
     background: var(--color-primary);
     color: white;
 }
-
-/* Calendar container grid */
-swp-calendar-container {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 60px 1fr;
-    grid-template-rows: 1fr;
-    overflow: hidden;
-    position: relative;
-}
+ 
 
 /* Week container for sliding */
 swp-week-container {
@@ -215,41 +206,6 @@ swp-time-axis {
     z-index: 4;
 }
 
-/* swp-hour-marker styles moved to calendar-layout-css.css */
-
-/* Week header */
-swp-week-header {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    height: 110px; /* Fixed height */
-}
-
-swp-day-header {
-    padding: 12px;
-    text-align: center;
-    border-right: 1px solid var(--color-grid-line);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-swp-day-header:last-child {
-    border-right: none;
-}
-
-swp-day-name {
-    display: block;
-    font-weight: 500;
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
-}
-
 swp-day-date {
     display: block;
     font-size: 1.25rem;