fix(embed): stabilize inline mobile layout when switching days#28496
fix(embed): stabilize inline mobile layout when switching days#28496abdulbaqui17 wants to merge 3 commits intocalcom:mainfrom
Conversation
|
|
There was a problem hiding this comment.
Pull request overview
This PR addresses UI layout shifting in the inline embed on narrow viewports by stabilizing scrollbar behavior, and also includes additional changes around rescheduling duration propagation and attendee email time format handling.
Changes:
- Reserve scrollbar gutter space in
AvailableTimeSlotsto prevent width jumps when overflow changes. - Add
durationquery param to reschedule redirect URLs based on the original booking length. - Ensure attendee scheduled emails fall back to organizer time format when attendee format is missing (with tests), plus a small unit test for duration fallback logic.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/features/bookings/lib/get-booking.test.ts | Adds a unit test for getMultipleDurationValue defaulting behavior. |
| packages/emails/templates/attendee-scheduled-email.ts | Ensures attendee.timeFormat is populated (fallback to organizer) before rendering the email template. |
| packages/emails/email-manager.test.ts | Adds coverage asserting the attendee time format fallback is passed into renderEmail. |
| apps/web/modules/bookings/components/AvailableTimeSlots.tsx | Adds scrollbar-gutter: stable to reduce layout shift in scrollable time slots on narrow viewports. |
| apps/web/lib/reschedule/[uid]/getServerSideProps.ts | Propagates original booking duration into reschedule redirect URL via duration query param. |
| apps/web/lib/reschedule/[uid]/getServerSideProps.test.ts | Adds tests verifying the reschedule redirect includes the correct duration parameter. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const originalBookingDurationInMinutes = Math.round( | ||
| (booking.endTime.getTime() - booking.startTime.getTime()) / (1000 * 60) | ||
| ); | ||
|
|
||
| if (originalBookingDurationInMinutes > 0) { | ||
| destinationUrlSearchParams.set("duration", String(originalBookingDurationInMinutes)); | ||
| } |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
sahitya-chandra
left a comment
sahitya-chandra
left a comment
There was a problem hiding this comment.
Closing in favor of #28481
Summary
Fixes inline embed layout shift on narrow viewports when switching selected days.
Problem
On mobile/narrow layouts, the available-times container can toggle vertical overflow between states while switching days. That causes scrollbar appearance/disappearance and a visible width jump.
Fix
AvailableTimeSlotsby reserving scrollbar gutter space.style={{ scrollbarGutter: "stable" }}This prevents layout width changes when vertical overflow changes across selected days.
Scope
Validation
Closes #28475