Keep scrollbars out of the booking calendar

[silveltman]

Why

The Cal.com calendar on /contact/ showed scrollbars:

• Sideways, and then also down: Cal.com's layout needs 1040px once its frame is 1024px or wider. The embed was 1024px wide (max-w-5xl), so it scrolled sideways, and the horizontal scrollbar took height and added a vertical one. Measured: overflow only at frame widths 1024 to 1039px.
• For a moment while loading: Cal.com makes the frame visible at 300px high and resizes it about 0.2 s later, after measuring the booking. This also happens on full.dev.

Change

• Cap the embed at 896px (max-w-4xl), as on full.dev, so the frame never reaches the 1024 to 1039px range.
• Keep the frame transparent until Cal.com reports linkReady (or linkFailed, or after 8 s), then fade it in.
• Keep the booking's height free from lg, so the footer does not jump.

The embed stays Cal.com's own embed.js inline embed. The direct link still shows when Cal.com's script is blocked.

Checks

• pnpm check and pnpm build pass.
• Local Playwright: no sideways overflow at any viewport width from 360 to 1600px (8px steps). The frame is never visible while its content overflows (sampled during load at 390, 700 and 1280px). The fallback link shows with Cal.com blocked.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Improvements
  • Updated the contact-page booking embed to stay within a narrower width and reduce horizontal scrolling.
  • The calendar now stays hidden until it is ready, while the direct booking link remains available until the embed loads.

[netlify]

✅ Deploy Preview for silveltman ready!

Name	Link
🔨 Latest commit	d6310fc
🔍 Latest deploy log	https://app.netlify.com/projects/silveltman/deploys/6accd637e1272b60a1d65a1a
😎 Deploy Preview	https://deploy-preview-25--silveltman.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Essentials
• Run ID: 51941a31-2cef-443f-888f-7646131e7cd5

---

📥 Commits

Reviewing files that changed from the base of the PR and between db70088 and d6310fc.

---

📒 Files selected for processing (3)

• DESIGN.md
• src/components/cal-embed.astro
• src/layouts/contact.astro

---

Included review availability: This review used your included allowance. 0 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

---

---

📝 Walkthrough

Walkthrough

The contact page’s Cal.com embed now has a maximum width of 896px and reserves more height on large screens. The iframe remains transparent until the embed signals readiness or an 8-second timeout occurs. The contact layout removes its previous width classes. DESIGN.md describes the sizing and fallback behavior.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

---

Merge Risk: ⚪ Minimal · up to d6310

The calendar reserves its intended desktop space and reveals on Cal.com events, with an eight-second fallback. No actionable merge-blocking risk remains.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: preventing scrollbars in the booking calendar.
Description check		The description directly explains the scrollbar causes, the width and loading changes, the fallback behavior, and the reported checks.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

---

_{Comment @coderabbitai help to get the list of available commands.}