From c510994ca26f19624532fb36336e3b8791894332 Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Sat, 2 Aug 2025 00:04:45 +0200
Subject: [PATCH] Makes calendar week view width dynamic

Changes the calendar week view to dynamically adjust its width based on the `--day-column-min-width` CSS variable.
This allows for more flexible and responsive layouts, avoiding fixed widths.
Also, the base calendar CSS file is now included in the index file.
---
 wwwroot/css/calendar-layout-css.css | 12 ++++++------
 wwwroot/css/calendar.css            |  2 ++
 wwwroot/index.html                  |  1 +
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 0ccc57c..6ca33c4 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -214,8 +214,8 @@ swp-hour-marker::after {
 /* Week header */
 swp-week-header {
   display: grid;
-  grid-template-columns: repeat(7, minmax(250px, 1fr));
-  min-width: 1750px; /* Match day-columns width */
+  grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
+  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;
@@ -307,7 +307,7 @@ swp-grid-lines {
   left: 0;
   right: 0;
   bottom: 0;
-  min-width: 1750px; /* Match day-columns width */
+  min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
   pointer-events: none;
   z-index: var(--z-grid);
   background-image: repeating-linear-gradient(
@@ -324,14 +324,14 @@ swp-day-columns {
   position: absolute;
   inset: 0;
   display: grid;
-  grid-template-columns: repeat(7, minmax(250px, 1fr));
-  min-width: 1750px; /* 7 * 250px = force horizontal scroll */
+  grid-template-columns: repeat(7, minmax(var(--day-column-min-width), 1fr));
+  min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
 }
 
 swp-day-column {
   position: relative;
   border-right: 1px solid var(--color-grid-line);
-  min-width: 250px;
+  min-width: var(--day-column-min-width);
 }
 
 swp-day-column:last-child {
diff --git a/wwwroot/css/calendar.css b/wwwroot/css/calendar.css
index 5a3c11f..ce74259 100644
--- a/wwwroot/css/calendar.css
+++ b/wwwroot/css/calendar.css
@@ -10,6 +10,8 @@
     --hour-height: 60px;
     --minute-height: 1px;
     --snap-interval: 15;
+    --day-column-min-width: 250px;
+    --week-days: 7;
     
     /* Time boundaries */
     --day-start-hour: 7;
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 587a50f..aec4a17 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -6,6 +6,7 @@
     <title>Calendar Plantempus - Week View</title>
     
     <!-- Modular CSS Files -->
+    <link rel="stylesheet" href="css/calendar.css">
     <link rel="stylesheet" href="css/calendar-base-css.css">
     <link rel="stylesheet" href="css/calendar-layout-css.css">
     <link rel="stylesheet" href="css/calendar-components-css.css">