Enhances CSS grid configuration synchronization

Replaces isolated grid column update with comprehensive CSS property management

Extends configuration synchronization to include:
- Dynamic grid layout dimensions
- Hour height configuration
- Work and day hour boundaries

Provides more flexible and configurable grid styling

src/configurations/ConfigManager.ts

@@ -9,11 +9,22 @@ import { TimeFormatter } from '../utils/TimeFormatter';
  */
 export class ConfigManager {
   /**
-   * Update CSS custom property for grid columns
+   * Synchronize all CSS custom properties with configuration
-   * This ensures the CSS grid matches the number of visible columns
+   * This ensures CSS grid, time axis, and grid lines match the configuration
    */
-  static updateGridColumns(weekDays: number): void {
+  static updateCSSProperties(config: Configuration): void {
-    document.documentElement.style.setProperty('--grid-columns', weekDays.toString());
+    const gridSettings = config.gridSettings;
+    const workWeekSettings = config.getWorkWeekSettings();
+
+    // Grid layout
+    document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());
+
+    // Grid timing and dimensions
+    document.documentElement.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
+    document.documentElement.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
+    document.documentElement.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
+    document.documentElement.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
+    document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
   }
 
   /**
@@ -59,9 +70,8 @@ export class ConfigManager {
     // Configure TimeFormatter
     TimeFormatter.configure(config.timeFormatConfig);
 
-    // Set initial CSS grid columns based on the current work week preset
+    // Synchronize all CSS custom properties with configuration
-    const workWeekSettings = config.getWorkWeekSettings();
+    ConfigManager.updateCSSProperties(config);
-    ConfigManager.updateGridColumns(workWeekSettings.totalDays);
 
     return config;
   }

src/managers/ViewManager.ts

@@ -96,8 +96,8 @@ export class ViewManager {
 
         this.config.setWorkWeek(workweekId);
 
-        // Update CSS grid columns to match new week days count
+        // Update all CSS properties to match new configuration
-        ConfigManager.updateGridColumns(this.config.dateViewSettings.weekDays);
+        ConfigManager.updateCSSProperties(this.config);
 
         this.updateAllButtons();