From b448126fc5fdf23710371c8f721701a169531453 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Wed, 11 Mar 2026 10:43:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(front)=20add=20responsive=20styles?=
 =?UTF-8?q?=20for=20calendar=20and=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add media queries and responsive adjustments for the
calendar page, scheduler, event modal, section pills,
section rows, and calendar list components.
---
 .../calendar-list/CalendarList.scss           |  4 ++++
 .../components/scheduler/EventModal.scss      | 10 ++++++++++
 .../components/scheduler/Scheduler.scss       | 19 ++++++++++++++++++-
 .../event-modal-sections/SectionPill.scss     | 10 ++++++++++
 .../event-modal-sections/SectionRow.scss      |  6 ++++++
 .../components/scheduler/scheduler-theme.scss |  9 +++++++++
 .../apps/calendars/src/pages/calendar.scss    | 17 ++++++++++++++++-
 7 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss b/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss
index 8422528..dba0d46 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss
@@ -144,6 +144,10 @@
       opacity 0.15s,
       background-color 0.15s,
       color 0.15s;
+
+    @media (hover: none) {
+      opacity: 1;
+    }
   }
 
   &__menu {
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
index 1e41166..86fc37e 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
@@ -70,6 +70,16 @@
   }
 }
 
+@media (max-width: 768px) {
+  .datetime-section__inputs {
+    flex-direction: column;
+  }
+
+  .datetime-section__arrow {
+    display: none;
+  }
+}
+
 // VideoConferenceSection layout
 .video-conference-section {
   display: flex;
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
index fc748c3..25f1fad 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
@@ -1,4 +1,15 @@
-#event-calendar {
+.scheduler {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.scheduler__calendar {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
   padding-right: 12px;
 }
 
@@ -210,3 +221,9 @@
     }
   }
 }
+
+.ec-col-head {
+  background-color: var(
+    --c--contextuals--background--surface--secondary
+  ) !important;
+}
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
index c80fec8..04ef02a 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionPill.scss
@@ -36,6 +36,16 @@
   }
 }
 
+@media (max-width: 768px) {
+  .section-pill {
+    padding: 0.5rem;
+
+    &__label {
+      display: none;
+    }
+  }
+}
+
 .section-pills {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
index c733dc3..80cd0b1 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
@@ -101,6 +101,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  .section-row__content {
+    padding-left: 0.5rem;
+  }
+}
+
 @keyframes sectionSlideDown {
   from {
     opacity: 0;
diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss
index 191c37d..175234d 100644
--- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss
+++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss
@@ -259,3 +259,12 @@
     border-right: 1px solid var(--ec-border-color);
   }
 }
+
+// -----------------------------------------------------------------------------
+// 9. Mobile adjustments - Hide native day headers (WeekDayBar replaces them)
+// -----------------------------------------------------------------------------
+@media (max-width: 768px) {
+  .ec-header {
+    display: none !important;
+  }
+}
diff --git a/src/frontend/apps/calendars/src/pages/calendar.scss b/src/frontend/apps/calendars/src/pages/calendar.scss
index 5d7c993..518e897 100644
--- a/src/frontend/apps/calendars/src/pages/calendar.scss
+++ b/src/frontend/apps/calendars/src/pages/calendar.scss
@@ -3,6 +3,10 @@
   height: 100%;
   min-height: calc(100vh - 60px);
 
+  @media (max-width: 768px) {
+    min-height: 0;
+  }
+
   &__sidebar {
     width: 260px;
     flex-shrink: 0;
@@ -18,12 +22,16 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    // overflow: hidden;
+    overflow: hidden;
+    min-height: 0;
   }
 }
 
 .calendars__calendar {
+  overflow: hidden;
   height: 100vh;
+  height: 100dvh;
+
   display: flex;
   flex-direction: column;
 
@@ -39,4 +47,11 @@
     flex-direction: column;
     overflow: hidden;
   }
+
+  // Override feedback footer padding - calendar has internal scroll
+  .c__main-layout__content__center__children {
+    @media (max-width: 768px) {
+      padding-bottom: 0;
+    }
+  }
 }