feat: add autoscroll in mobile

[Udit-takkar]

What does this PR do?

• Fixes [CAL-3764] re-add: scroll to time after clicking a date on mobile #15122

• Fixes CAL-3764 (Linear issue number - should be visible at the bottom of the GitHub issue description)

• Fixes [CAL-3607] Scroll to time slots on booking page (Mobile size) #14851

• Fixes CAL-3607

• Only scroll the first time user clicks on a date in mobile

Screen.Recording.2024-05-20.at.4.20.55.PM.mov

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected)
• I have added a Docs issue here if this PR makes changes that would require a documentation change
• I have added or modified automated tests that prove my fix is effective or that my feature works (PRs might be rejected if logical changes are not properly tested)

[linear]

CAL-3764 re-add: scroll to time after clicking a date on mobile

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 20, 2024 10:52am

[github-actions]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

[linear]

CAL-3607 Scroll to time slots on booking page (Mobile size)

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (05/20/24)

1 reviewer was added to this PR based on Keith Williams's automation.

[github-actions]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[deploysentinel]

Current Playwright Test Results Summary

✅ 321 Passing - ⚠️ 29 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 05/20/2024 11:06:37am UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 235d9b4

Started: 05/20/2024 11:02:53am UTC

⚠️ Flakes

📄   apps/web/playwright/event-types.e2e.ts • 3 Flakes

Top 1 Common Error Messages

null	3 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Event Types tests -- future user can add multiple organizer address Retry 1 • Initial Attempt	1.69% (4) 4 / 236 runs failed over last 7 days	22.03% (52) 52 / 236 runs flaked over last 7 days
Event Types tests -- future user Different Locations Tests Can remove location from multiple locations that are saved Retry 1 • Initial Attempt	4.26% (10) 10 / 235 runs failed over last 7 days	5.96% (14) 14 / 235 runs flaked over last 7 days
Event Types tests -- legacy user Different Locations Tests can select 'display on booking page' option when multiple organizer input type are present Retry 1 • Initial Attempt	0.43% (1) 1 / 232 run failed over last 7 days	6.03% (14) 14 / 232 runs flaked over last 7 days

---

📄   apps/web/playwright/profile.e2e.ts • 2 Flakes

Top 1 Common Error Messages

null	2 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Update Profile Can update a users email (verification enabled) Retry 2 • Retry 1 • Initial Attempt	37.20% (93) 93 / 250 runs failed over last 7 days	35.20% (88) 88 / 250 runs flaked over last 7 days
Update Profile Can resend verification link if the secondary email is unverified Retry 1 • Initial Attempt	11.90% (30) 30 / 252 runs failed over last 7 days	28.97% (73) 73 / 252 runs flaked over last 7 days

---

📄   apps/web/playwright/workflow.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Workflow Tab - Event Type Check the functionalities of the Workflow Tab User Workflows Create an action and check if workflow is triggered Retry 1 • Initial Attempt	2.58% (6) 6 / 233 runs failed over last 7 days	1.72% (4) 4 / 233 runs flaked over last 7 days

---

📄   packages/embeds/embed-core/playwright/tests/namespacing.e2e.ts • 4 Flakes

Top 1 Common Error Messages

null	4 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Namespacing Inline Embed Double install Embed Snippet with inline embed without a namespace(i.e. default namespace) Retry 1 • Initial Attempt	0% (0) 0 / 227 runs failed over last 7 days	65.20% (148) 148 / 227 runs flaked over last 7 days
Namespacing Inline Embed Add inline embed using a namespace without reload Retry 1 • Initial Attempt	0.44% (1) 1 / 227 run failed over last 7 days	63% (143) 143 / 227 runs flaked over last 7 days
Namespacing Inline Embed Double install Embed Snippet with inline embed using a namespace Retry 1 • Initial Attempt	0.44% (1) 1 / 227 run failed over last 7 days	62.56% (142) 142 / 227 runs flaked over last 7 days
Namespacing Different namespaces can have different init configs Retry 1 • Initial Attempt	0% (0) 0 / 225 runs failed over last 7 days	62.67% (141) 141 / 225 runs flaked over last 7 days

---

📄   apps/web/playwright/signup.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Signup Flow Test Email verification sent if enabled Retry 1 • Initial Attempt	0.83% (2) 2 / 242 runs failed over last 7 days	26.86% (65) 65 / 242 runs flaked over last 7 days

---

📄   apps/web/playwright/booking-pages.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
pro user -- future Time slots should be reserved when selected Retry 1 • Initial Attempt	0% (0) 0 / 220 runs failed over last 7 days	5.91% (13) 13 / 220 runs flaked over last 7 days

---

📄   apps/web/playwright/webhook.e2e.ts • 2 Flakes

Top 1 Common Error Messages

null	2 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
MEETING_ENDED, MEETING_STARTED should create/remove scheduledWebhookTriggers for existing bookings Retry 1 • Initial Attempt	4.52% (10) 10 / 221 runs failed over last 7 days	32.13% (71) 71 / 221 runs flaked over last 7 days
FORM_SUBMITTED on submitting team form, triggers team webhook Retry 1 • Initial Attempt	0% (0) 0 / 239 runs failed over last 7 days	2.93% (7) 7 / 239 runs flaked over last 7 days

---

📄   packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 9 Flakes

Top 1 Common Error Messages

null	9 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should open embed iframe on click - Configured with light theme Retry 1 • Initial Attempt	2.17% (5) 5 / 230 runs failed over last 7 days	60.87% (140) 140 / 230 runs flaked over last 7 days
Popup Tests should be able to reschedule Retry 1 • Initial Attempt	-164.71% (-140) -140 / 85 runs failed over last 7 days	164.71% (140) 140 / 85 runs flaked over last 7 days
Popup Tests should open Routing Forms embed on click Retry 1 • Initial Attempt	-162.35% (-138) -138 / 85 runs failed over last 7 days	162.35% (138) 138 / 85 runs flaked over last 7 days
Popup Tests Floating Button Popup Pro User - Configured in App with default setting of system theme should open embed iframe according to system theme when no theme is configured through Embed API Retry 1 • Initial Attempt	-157.65% (-134) -134 / 85 runs failed over last 7 days	158.82% (135) 135 / 85 runs flaked over last 7 days
Popup Tests Floating Button Popup Pro User - Configured in App with default setting of system theme should open embed iframe(Booker Profile Page) with dark theme when configured with dark theme using Embed API Retry 1 • Initial Attempt	-159.52% (-134) -134 / 84 runs failed over last 7 days	159.52% (134) 134 / 84 runs flaked over last 7 days
Popup Tests Floating Button Popup Pro User - Configured in App with default setting of system theme should open embed iframe according to system theme when configured with 'auto' theme using Embed API Retry 1 • Initial Attempt	-159.52% (-134) -134 / 84 runs failed over last 7 days	159.52% (134) 134 / 84 runs flaked over last 7 days
Popup Tests Floating Button Popup Pro User - Configured in App with default setting of system theme should open embed iframe(Event Booking Page) with dark theme when configured with dark theme using Embed API Retry 1 • Initial Attempt	-159.52% (-134) -134 / 84 runs failed over last 7 days	159.52% (134) 134 / 84 runs flaked over last 7 days
Popup Tests prendered embed should be loaded and apply the config given to it Retry 1 • Initial Attempt	-159.52% (-134) -134 / 84 runs failed over last 7 days	159.52% (134) 134 / 84 runs flaked over last 7 days
Popup Tests should open on clicking child element Retry 1 • Initial Attempt	-159.04% (-132) -132 / 83 runs failed over last 7 days	159.04% (132) 132 / 83 runs flaked over last 7 days

---

📄   apps/web/playwright/organization/organization-invitation.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Organization Email matching orgAutoAcceptEmail and a Verified Organization with DNS Setup Done existing user migrated to an organization Retry 1 • Initial Attempt	0% (0) 0 / 231 runs failed over last 7 days	5.19% (12) 12 / 231 runs flaked over last 7 days

---

📄   apps/web/playwright/teams.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Teams - NonOrg -- future Can create a booking for Round Robin EventType Retry 1 • Initial Attempt	8.71% (21) 21 / 241 runs failed over last 7 days	25.31% (61) 61 / 241 runs flaked over last 7 days

---

📄   apps/web/playwright/login.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
user can login & logout succesfully -- future login flow user & logout using dashboard Retry 1 • Initial Attempt	5.17% (12) 12 / 232 runs failed over last 7 days	33.62% (78) 78 / 232 runs flaked over last 7 days

---

📄   packages/app-store/routing-forms/playwright/tests/basic.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Routing Forms Seeded Routing Form Router URL should work Retry 2 • Retry 1 • Initial Attempt	0.44% (1) 1 / 228 run failed over last 7 days	14.04% (32) 32 / 228 runs flaked over last 7 days

---

📄   apps/web/playwright/organization/booking.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Bookings Team Event Can create a booking for Round Robin EventType Retry 2 • Retry 1 • Initial Attempt	7.66% (18) 18 / 235 runs failed over last 7 days	26.81% (63) 63 / 235 runs flaked over last 7 days

---

📄   packages/embeds/embed-react/playwright/tests/basic.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
React Embed Element Click Popup should verify that the iframe got created with correct URL - namespaced Retry 1 • Initial Attempt	19.09% (46) 46 / 241 runs failed over last 7 days	34.85% (84) 84 / 241 runs flaked over last 7 days

---

View Detailed Build Results

---