refactor(schedule): extract magic numbers to named constants

Create schedule.constants.ts and schedule-constants.scss with named
constants for viewport thresholds, breakpoints, column widths, and
scrollbar dimensions. Update components to use constants for better
maintainability and documentation.

src/app/features/schedule/schedule-constants.scss

@@ -0,0 +1,22 @@
+/**
+ * SCSS constants for the Schedule component.
+ *
+ * These values control the responsive behavior and layout of the schedule view.
+ * They should be kept in sync with schedule.constants.ts where applicable.
+ */
+
+// Viewport breakpoints
+$schedule-horizontal-scroll-threshold: 1900px;
+$schedule-tablet-breakpoint: 768px;
+$schedule-mobile-breakpoint: 480px;
+
+// Column widths
+$schedule-time-column-width: 3em;
+$schedule-day-column-width-desktop: 180px;
+$schedule-day-column-width-tablet: 150px;
+$schedule-day-column-width-mobile: 120px;
+
+// Scrollbar dimensions
+$schedule-scrollbar-height: 8px;
+$schedule-scrollbar-width: 4px;
+$schedule-header-scrollbar-padding: 11px;

src/app/features/schedule/schedule-week/schedule-week.component.scss

@@ -1,19 +1,20 @@
 @use 'angular-material-css-vars' as mat-css-vars;
 @use '../../../../styles/_globals.scss' as *;
+@use '../schedule-constants.scss' as *;
 
 :host {
-  --schedule-time-width: 3em;
+  --schedule-time-width: #{$schedule-time-column-width};
   // Responsive day column widths
-  --schedule-day-width: 180px; // Default for desktop
+  --schedule-day-width: #{$schedule-day-column-width-desktop}; // Default for desktop
 
   @include mq(md, max) {
     // Tablet
-    --schedule-day-width: 150px;
+    --schedule-day-width: #{$schedule-day-column-width-tablet};
   }
 
   @include mq(xs, max) {
     // Mobile
-    --schedule-day-width: 120px;
+    --schedule-day-width: #{$schedule-day-column-width-mobile};
   }
 
   // Enable horizontal scroll when viewport is too small for 7 days

src/app/features/schedule/schedule.constants.ts

@@ -0,0 +1,49 @@
+/**
+ * Constants for the Schedule component.
+ *
+ * These values control the responsive behavior and layout of the schedule view.
+ */
+
+export const SCHEDULE_CONSTANTS = {
+  /**
+   * Viewport width threshold (in pixels) below which the schedule switches to horizontal scroll mode.
+   * Above this width, all days are visible side-by-side.
+   * Below this width, horizontal scrolling is enabled to navigate between days.
+   */
+  HORIZONTAL_SCROLL_THRESHOLD: 1900,
+
+  /**
+   * Responsive breakpoints for different device sizes.
+   */
+  BREAKPOINTS: {
+    /** Width threshold for tablet devices (768px) */
+    TABLET: 768,
+    /** Width threshold for mobile devices (480px) */
+    MOBILE: 480,
+  },
+
+  /**
+   * Column widths for different screen sizes.
+   * These values determine the width of day columns in the schedule view.
+   */
+  COLUMN_WIDTHS: {
+    /** Desktop day column width in pixels */
+    DESKTOP: 180,
+    /** Tablet day column width in pixels */
+    TABLET: 150,
+    /** Mobile day column width in pixels */
+    MOBILE: 120,
+  },
+
+  /**
+   * Scrollbar dimensions for the horizontal scroll mode.
+   */
+  SCROLLBAR: {
+    /** Height of the horizontal scrollbar in pixels */
+    HEIGHT: 8,
+    /** Default width/height of scrollbar elements in pixels */
+    WIDTH: 4,
+    /** Additional padding for the header to accommodate scrollbar */
+    HEADER_PADDING: 11,
+  },
+} as const;

src/app/features/schedule/schedule/schedule.component.scss

@@ -1,4 +1,5 @@
 @use '../../../../styles/_globals.scss' as *;
+@use '../schedule-constants.scss' as *;
 
 :host {
   --nr-of-days: 5;
@@ -21,17 +22,17 @@
     overflow-x: scroll; // Show horizontal scrollbar when needed
 
     // Match app's standard scrollbar styling
-    scrollbar-width: 4px;
+    scrollbar-width: $schedule-scrollbar-width;
     scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 
     &::-webkit-scrollbar {
-      width: 4px;
-      height: 8px; // Slightly taller for horizontal visibility
+      width: $schedule-scrollbar-width;
+      height: $schedule-scrollbar-height; // Slightly taller for horizontal visibility
     }
 
     &::-webkit-scrollbar-track {
       background: var(--scrollbar-track);
-      border-radius: 4px;
+      border-radius: $schedule-scrollbar-width;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -59,7 +60,7 @@ header {
   color: var(--text-color);
   background: var(--bg-lighter);
   // to account for scrollbar
-  padding-right: 11px;
+  padding-right: $schedule-header-scrollbar-padding;
 }
 
 .schedule-nav-controls {

src/app/features/schedule/schedule/schedule.component.ts

@@ -30,6 +30,7 @@ import { ScheduleService } from '../schedule.service';
 import { DateAdapter } from '@angular/material/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import { T } from '../../../t.const';
+import { SCHEDULE_CONSTANTS } from '../schedule.constants';
 
 @Component({
   selector: 'schedule',
@@ -96,7 +97,7 @@ export class ScheduleComponent {
       return false;
     }
     // Enable scroll when viewport is smaller than what's needed for 7 days
-    return this._windowSize().width < 1900;
+    return this._windowSize().width < SCHEDULE_CONSTANTS.HORIZONTAL_SCROLL_THRESHOLD;
   });
 
   private _daysToShowCount = computed(() => {