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

[nicomiguelino]

User description

Summary

Added orientation-aware event limits to the schedule calendar view. Landscape mode displays 10 events while portrait mode displays 17 events, with dynamic recalculation on screen orientation changes.

Changes

• Display 10 events in landscape mode, 15 in portrait mode
• Add resize event listener to detect orientation changes
• Automatically recalculate and update displayed events when orientation changes

Screenshots

---

PR Type

Enhancement, Bug fix

---

Description

• Add dynamic event limits based on orientation

• Guard window access for SSR and tests

• Adjust SCSS landscape view sizing ratio

---

Diagram Walkthrough

flowchart LR
  A["Window resize event"] -- "triggers" --> B["updateOrientation"]
  B -- "sets flag" --> C["isPortrait flag"]
  C -- "computes" --> D["maxEvents value"]
  D -- "limits" --> E["filterAndFormatEvents"]
  E -- "populates" --> F["today/tomorrow events"]

Loading

File Walkthrough

	Relevant files
Enhancement	ScheduleCalendarView.vue Add orientation logic and SSR window guards                            edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue Imported onMounted and onUnmounted hooks Added orientation detection via updateOrientation Computed maxEvents from isPortrait flag Updated event filtering to use dynamic limit Wrapped window access in safety checks +38/-8
Configuration changes	schedule-calendar-view.scss Update landscape sizing ratio                                                        edge-apps/blueprint/ts/assets/calendar/schedule-calendar-view.scss Increased landscape ratio from 0.65 to 0.85 Kept portrait media query unchanged +1/-1

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 09c6f02)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Limit Mismatch The PR description and comments refer to a portrait limit of 15 events, but MAX_EVENTS_PORTRAIT is set to 17. Confirm and align the constant value, documentation, and comments. const MAX_EVENTS_LANDSCAPE = 10 const MAX_EVENTS_PORTRAIT = 17 Performance Concern The resize listener invokes updateOrientation (and triggers recomputation) on every resize event. Consider debouncing or throttling to prevent excessive re-renders on rapid resizes. onMounted(() => { if (typeof window === 'undefined') { return } updateOrientation() window.addEventListener('resize', updateOrientation) }) Style Adjustment Verification The landscape view multiplier was changed from 0.65 to 0.85. Verify that this scaling ratio matches design specs and does not introduce layout regressions. @media screen and (min-width: 800px) and (max-width: 1279px) and (orientation: landscape) { @include schedule-calendar-view('landscape', 0.85); }

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 09c6f02
Explore these optional code suggestions:

Category	Suggestion	Impact
General	fix portrait limit comment The comment is out of sync with the actual MAX_EVENTS_PORTRAIT value. Update it to reflect the portrait limit of 17 events for clarity. edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue [97] -// Distribute events based on orientation (10 for landscape, 15 for portrait) +// Distribute events based on orientation (10 for landscape, 17 for portrait) Suggestion importance[1-10]: 5 __ Why: The comment incorrectly mentions 15 portrait events while MAX_EVENTS_PORTRAIT is 17, so updating it improves clarity.	Low
	use passive resize listener To improve scroll performance and avoid blocking rendering during resize, mark the listener as passive. edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue [29] -window.addEventListener('resize', updateOrientation) +window.addEventListener('resize', updateOrientation, { passive: true }) Suggestion importance[1-10]: 3 __ Why: Adding { passive: true } to the resize listener is valid but yields minimal impact since resize isn’t cancellable.	Low

---

Previous suggestions

Suggestions up to commit 2a94cca

Category	Suggestion	Impact
Possible issue	Avoid SSR window errors Initialize isPortrait only after the component mounts to prevent window references during SSR. Move the initial orientation check into onMounted by calling updateOrientation before registering the listener. edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue [15-27] -const isPortrait = ref(window.innerHeight > window.innerWidth) +const isPortrait = ref(false) onMounted(() => { + updateOrientation() window.addEventListener('resize', updateOrientation) }) onUnmounted(() => { window.removeEventListener('resize', updateOrientation) }) Suggestion importance[1-10]: 8 __ Why: The initialization of isPortrait uses window, which can break during SSR; moving the check into onMounted ensures safe usage and prevents server-side errors.	Medium
General	Debounce resize listener Debounce the resize event handler to reduce frequent updateOrientation calls during window resizing. Wrap the handler with a timeout-based debounce mechanism. edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue [21-27] +let resizeTimeout: number | null = null +const debouncedUpdate = () => { + if (resizeTimeout !== null) clearTimeout(resizeTimeout) + resizeTimeout = window.setTimeout(updateOrientation, 200) +} + onMounted(() => { - window.addEventListener('resize', updateOrientation) + window.addEventListener('resize', debouncedUpdate) }) onUnmounted(() => { - window.removeEventListener('resize', updateOrientation) + window.removeEventListener('resize', debouncedUpdate) }) Suggestion importance[1-10]: 5 __ Why: Debouncing the resize event reduces unnecessary calls to updateOrientation for performance, though the handler is lightweight so the impact is moderate.	Low

[Copilot]

Pull request overview

Adds orientation-aware event limiting to the schedule calendar view so the number of rendered events adapts when switching between portrait and landscape.

Changes:

• Introduces portrait/landscape max event thresholds (15/10) and derives the active limit via a computed value.
• Adds a window resize listener to update orientation state and re-run event filtering when the limit changes.
• Tweaks schedule view landscape sizing multiplier for a specific breakpoint.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue	Adds orientation tracking + computed max event limit and re-filters events when orientation/limit changes.
edge-apps/blueprint/ts/assets/calendar/schedule-calendar-view.scss	Adjusts landscape breakpoint scaling multiplier.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Persistent review updated to latest commit 09c6f02