feat(calendar-apps): add orientation-based event limits to schedule view

edge-apps/blueprint/ts/assets/calendar/schedule-calendar-view.scss

@@ -91,7 +91,7 @@
 }
 
 @media screen and (min-width: 800px) and (max-width: 1279px) and (orientation: landscape) {
-  @include schedule-calendar-view('landscape', 0.65);
+  @include schedule-calendar-view('landscape', 0.85);
 }
 
 @media screen and (min-width: 480px) and (max-width: 719px) and (orientation: portrait) {

edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
 import EventTimeRange from './EventTimeRange.vue'
 import type { CalendarEvent } from '../../constants/calendar'
 import dayjs from 'dayjs'
@@ -9,7 +9,36 @@ import dayJsTimezone from 'dayjs/plugin/timezone'
 dayjs.extend(utc)
 dayjs.extend(dayJsTimezone)
 
-const MAX_EVENTS = 7
+const MAX_EVENTS_LANDSCAPE = 10
+const MAX_EVENTS_PORTRAIT = 17
+
+const isPortrait = ref(false)
+
+const updateOrientation = () => {
+  if (typeof window === 'undefined') {
+    return
+  }
+  isPortrait.value = window.innerHeight > window.innerWidth
+}
+
+onMounted(() => {
+  if (typeof window === 'undefined') {
+    return
+  }
+  updateOrientation()
+  window.addEventListener('resize', updateOrientation)
+})
+
+onUnmounted(() => {
+  if (typeof window === 'undefined') {
+    return
+  }
+  window.removeEventListener('resize', updateOrientation)
+})
+
+const maxEvents = computed(() =>
+  isPortrait.value ? MAX_EVENTS_PORTRAIT : MAX_EVENTS_LANDSCAPE,
+)
 
 interface Props {
   timezone?: string
@@ -65,26 +94,27 @@ const filterAndFormatEvents = () => {
   todayEventsList.sort(sortByStartTime)
   tomorrowEventsList.sort(sortByStartTime)
 
-  // Distribute events to maintain total around MAX_EVENTS
+  // Distribute events based on orientation (10 for landscape, 15 for portrait)
   let limitedTodayEvents: CalendarEvent[]
   let limitedTomorrowEvents: CalendarEvent[]
+  const limit = maxEvents.value
 
-  if (todayEventsList.length >= MAX_EVENTS) {
-    // If today has 7+ events, show only today's events
-    limitedTodayEvents = todayEventsList.slice(0, MAX_EVENTS)
+  if (todayEventsList.length >= limit) {
+    // If today has enough events to fill the limit, show only today's events
+    limitedTodayEvents = todayEventsList.slice(0, limit)
     limitedTomorrowEvents = []
   } else {
     // Show all of today's events and fill remaining slots with tomorrow's events
     limitedTodayEvents = todayEventsList
-    const remainingSlots = MAX_EVENTS - todayEventsList.length
+    const remainingSlots = limit - todayEventsList.length
     limitedTomorrowEvents = tomorrowEventsList.slice(0, remainingSlots)
   }
 
   todayEvents.value = limitedTodayEvents
   tomorrowEvents.value = limitedTomorrowEvents
 }
 
-watch([events, () => props.timezone], filterAndFormatEvents, {
+watch([events, () => props.timezone, maxEvents], filterAndFormatEvents, {
   immediate: true,
 })
 </script>