feat: Add tablet layout to Booker #20742

evan-liu · 2025-04-17T03:40:59Z

Summary by mrge

Added tablet layout to the Booker component for improved user experience on medium-sized screens (768px-1024px viewport width).

UI Improvements

Created responsive grid layout specifically for tablet view with optimized content positioning
Adjusted EventMeta component to display properly in tablet mode with better spacing and organization
Maintained consistent user experience across mobile, tablet, and desktop layouts

What does this PR do?

Booking page: new tablet view

Fixes [CAL-5253] booking page: new tablet view for #19698 (GitHub issue number)
Fixes CAL-5253 (Linear issue number - should be visible at the bottom of the GitHub issue description)

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Live Preview:

(resize the viewport to be 768px - 1024px, click time slots to open the booking form)

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox. N/A
I confirm automated tests are in place that prove my fix is effective or that my feature works.

vercel · 2025-04-17T03:41:05Z

@evan-liu is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

CLAassistant · 2025-04-17T03:41:06Z

All committers have signed the CLA.

cubic-dev-ai

mrge found 1 issue across 7 files. View it in mrge.io

packages/features/bookings/Booker/components/hooks/useBookerLayout.ts

graphite-app · 2025-04-17T03:45:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (04/17/25)

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

"Add community label" took an action on this PR • (04/17/25)

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

evan-liu · 2025-04-17T07:51:47Z

packages/features/bookings/Booker/components/hooks/useBookerLayout.ts

+    // Same as month_view
+    tablet: false,


I am not sure about what to do here, trying to be consistent with the desktop month view, but can be easily changed.

I don't think it's looks good now. cc @PeerRich

Option B: Move meta to the left side:

(resize the viewport to be 768px - 1024px, click "back" and time slots to see the transition)

Short Form

Long Form

Option C: In dialog, same as the mobile layout.

Please let me know which option is preferred or if you have any other ideas for trying out.

oh yeah no bueno. lemme ask @ciaranha

I like Option C: Modal - View in Figma
https://github.com/user-attachments/assets/b932bfba-852c-441d-b3a1-eafe8aa2d15d

I've also done designs here for:

Option B: Move the left side View in Figma

Option C: single column option View in Figma

Thanks @ciaranha.

I had assumed it was full screen before — I’ll switch to fixed widths.

Just to confirm: the meta section should be 1 column (unlike the 2 columns in [CAL-5253] booking page: new tablet view for #19698), correct?

Hi @ciaranha @anikdhabal, I've changed to the modal option, please have a look:

(resize the viewport to be 768px - 1024px, click time slots to open the booking modal)

With Org Banner

Without Org Banner

packages/features/bookings/Booker/components/Header.tsx

retrogtx

This is a great PR btw

retrogtx · 2025-04-18T02:29:01Z

please know that this might take some time as it requires approval from both platform and foundation team 🙏

github-actions · 2025-05-25T00:27:51Z

This PR is being marked as stale due to inactivity.

coderabbitai · 2025-07-16T16:39:43Z

Warning

Rate limit exceeded

@anikdhabal has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 19 minutes and 37 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 558140f and 6994d4f.

📒 Files selected for processing (3)

packages/features/bookings/Booker/Booker.tsx (5 hunks)
packages/features/bookings/Booker/components/hooks/useBookerLayout.ts (2 hunks)
packages/features/bookings/Booker/config.ts (5 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

evan-liu requested review from a team as code owners April 17, 2025 03:41

graphite-app bot requested a review from a team April 17, 2025 03:41

graphite-app bot added the community Created by Linear-GitHub Sync label Apr 17, 2025

github-actions bot added booking-page area: booking page, public booking page, booker ui area: UI, frontend, button, form, input ✨ feature New feature or request labels Apr 17, 2025

cubic-dev-ai bot reviewed Apr 17, 2025

View reviewed changes

packages/features/bookings/Booker/components/hooks/useBookerLayout.ts Show resolved Hide resolved

evan-liu force-pushed the feat/19698-booker-tablet-view branch 2 times, most recently from 589a42e to 2b25134 Compare April 17, 2025 07:49

evan-liu commented Apr 17, 2025

View reviewed changes

retrogtx reviewed Apr 18, 2025

View reviewed changes

packages/features/bookings/Booker/components/Header.tsx Outdated Show resolved Hide resolved

retrogtx reviewed Apr 18, 2025

View reviewed changes

evan-liu force-pushed the feat/19698-booker-tablet-view branch 4 times, most recently from a60f915 to 5957ea3 Compare May 10, 2025 03:38

feat: Add tablet layout to Booker

6994d4f

evan-liu force-pushed the feat/19698-booker-tablet-view branch from 5957ea3 to 6994d4f Compare May 10, 2025 03:51

evan-liu requested a review from anikdhabal May 10, 2025 03:59

github-actions bot added the Stale label May 25, 2025

anikdhabal added the Low priority Created by Linear-GitHub Sync label Jul 16, 2025

anikdhabal requested a review from sean-brydon August 7, 2025 04:32

feat: Add tablet layout to Booker #20742

Are you sure you want to change the base?

feat: Add tablet layout to Booker #20742

Conversation

evan-liu commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by mrge

What does this PR do?

Visual Demo (For contributors especially)

Live Preview:

Mandatory Tasks (DO NOT REMOVE)

Uh oh!

vercel bot commented Apr 17, 2025

Uh oh!

CLAassistant commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

graphite-app bot commented Apr 17, 2025

Graphite Automations

Uh oh!

evan-liu Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

anikdhabal Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

evan-liu Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PeerRich May 6, 2025

Choose a reason for hiding this comment

Uh oh!

ciaranha May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evan-liu May 7, 2025

Choose a reason for hiding this comment

Uh oh!

evan-liu May 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

retrogtx left a comment

Choose a reason for hiding this comment

Uh oh!

retrogtx commented Apr 18, 2025

Uh oh!

github-actions bot commented May 25, 2025

Uh oh!

coderabbitai bot commented Jul 16, 2025

Rate limit exceeded

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

evan-liu commented Apr 17, 2025 •

edited

Loading

CLAassistant commented Apr 17, 2025 •

edited

Loading

evan-liu Apr 21, 2025 •

edited

Loading

ciaranha May 7, 2025 •

edited

Loading

evan-liu May 10, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)