💄(front) add responsive styles for calendar and modal

Add media queries and responsive adjustments for the
calendar page, scheduler, event modal, section pills,
section rows, and calendar list components.

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 {

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;

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;
+}

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;

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;

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;
+  }
+}

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;
+    }
+  }
 }