fix: prevent external CSS from breaking Cal.com embed by sahitya-chandra · Pull Request #22778 · calcom/cal.com

sahitya-chandra · 2025-07-28T13:19:44Z

What does this PR do?

Fixes Embed: Websites override a few things on the page, breaking the embed in one way or the another #22777
Fixes CAL-6163

Visual Demo (For contributors especially)

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

Video Demo (if applicable):

Show screen recordings of the issue or feature.
Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

Add side-by-side screenshots of the original and updated change.
Highlight any significant change(s).

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.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Are there environment variables that should be set?
What are the minimal test data to have?
What is expected (happy path) to have (input and output)?
Any other important info that could help to test that PR

Checklist

I haven't read the contributing guide
My code doesn't follow the style guidelines of this project
I haven't commented my code, particularly in hard-to-understand areas
I haven't checked if my changes generate no new warnings

coderabbitai · 2025-07-28T13:19:53Z

"""

Walkthrough

The .cal-embed CSS class was updated to include display: block !important, color-scheme: unset !important, and background: transparent !important style rules. Additionally, the embed iframe initialization and the actOnColorScheme function in the embed iframe script now explicitly set the document's color scheme to the provided value or "unset" by default and set the body background to "transparent". These changes ensure the embed is not hidden by host page styles and maintain transparent backgrounds and neutral color schemes within the iframe.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Ensure `.cal-embed` is not hidden by overriding styles (add `.cal-embed { display: block !important; }`) (#22777, CAL-6163)	✅
Fix iframe color-scheme issues by setting `{ color-scheme: unset }` (#22777, CAL-6163)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes were found.
"""

Note

🔌 MCP (Model Context Protocol) integration is now available in Early Access!

Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5062f60 and 9c82c7d.

📒 Files selected for processing (1)

packages/embeds/embed-core/src/embed-iframe.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/embeds/embed-core/src/embed-iframe.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Install dependencies / Yarn install & cache

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 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.
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.

Support

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

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 generate unit tests to generate unit tests for 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.

vercel · 2025-07-28T13:20:03Z

@sahitya-chandra is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

graphite-app · 2025-07-28T13:20:12Z

Graphite Automations

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

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

"Add community label" took an action on this PR • (07/28/25)

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

coderabbitai

Actionable comments posted: 1

🔭 Outside diff range comments (1)

packages/embeds/embed-core/src/embed.css (1)
4-10: Second half of the bug-fix (iframe color-scheme) is missing

Issue #22777 / CAL-6163 also describes host CSS that applies
iframe { color-scheme: normal; }, breaking our transparent iframe.
This rule is not addressed here, so the embed can still appear with an incorrect background.

Add a targeted override:
+.cal-embed iframe {
+  /* Reset host-page rule to restore transparency */
+  color-scheme: unset !important;
+}
Without this, the PR only fixes half of the reported breakage.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9cd806f and aac57ff.

📒 Files selected for processing (1)

packages/embeds/embed-core/src/embed.css (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: hariombalhara
PR: calcom/cal.com#22547
File: packages/embeds/embed-core/src/lib/eventHandlers/scrollByDistanceEventHandler.ts:11-14
Timestamp: 2025-07-16T11:46:28.759Z
Learning: In Cal.com's embed system, internal events like "__scrollByDistance" are fired by Cal.com's own code, so runtime validation of event data structure is unnecessary since TypeScript type system guarantees type safety for internal events.

packages/embeds/embed-core/src/embed.css (1)

Learnt from: hariombalhara
PR: #22547
File: packages/embeds/embed-core/src/lib/eventHandlers/scrollByDistanceEventHandler.ts:11-14
Timestamp: 2025-07-16T11:46:28.759Z
Learning: In Cal.com's embed system, internal events like "__scrollByDistance" are fired by Cal.com's own code, so runtime validation of event data structure is unnecessary since TypeScript type system guarantees type safety for internal events.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Detect changes

packages/embeds/embed-core/src/embed.css

anikdhabal · 2025-08-08T06:34:14Z

cc @hariombalhara for a quick review

hariombalhara · 2025-08-08T07:11:27Z

packages/embeds/embed-core/src/embed-iframe.ts

  embedStore.theme = window?.getEmbedTheme?.();

+  // Initialize with color-scheme: unset and transparent background to prevent opaque background issues
+  document.documentElement.style.colorScheme = "unset";


This is the cal.com app itself we don't want to force css here

@hariombalhara sir, I have removed the forced CSS. Please have a look !!

hariombalhara · 2025-08-08T09:41:19Z

packages/embeds/embed-core/src/embed-iframe.ts

+  document.documentElement.style.colorScheme = colorScheme || "unset";
+  document.body.style.background = "transparent";


I meant that we shouldn't modify anything in the iframe. Inside the iframe, cal.com code is there, we already handle that correctly.

hariombalhara · 2025-08-08T09:44:03Z

packages/embeds/embed-core/src/embed.css

  min-height: 300px;
  margin: 0 auto;
  width: 100%;
+  display: block !important;


Can we confirm that the element that .cal-embed class always has display: block(and not flex or hidden or something else) ?

This is important because if there is some condition where that element's display becomes flex or hidden temporarily, it would stop working.

@sahitya-chandra Did you confirm this part?

Also, were you able to test it out. Please add a loom demonstrating that a webpage even after having these css props set for .cal-embed, the embed is still not affected.

sahitya-chandra · 2025-09-03T07:04:08Z

@hariombalhara sir, I created a simple React app to test the embed, and then I added this external CSS in App.css file

iframe {
  display: none !important;
  border: 1px solid blue !important;
  border-radius: 5px !important;
  width: 50vw !important;
}

after adding this I test both main and this cal-6163 branch

main branch

Screencast.from.2025-09-01.00-27-01.webm

cal-6163 branch(current branch)

Screencast.from.2025-09-01.00-30-09.webm

sahitya-chandra · 2025-09-03T07:10:04Z

Embed is not breaking after adding these new css but adding external css can still override the embed (but it did not break the embed)

sahitya-chandra · 2025-09-04T15:32:18Z

@hariombalhara sir I have added the video proof, can you have a look

hariombalhara · 2025-09-04T15:34:12Z

thanks, I will check soon!!

hariombalhara · 2025-09-08T10:16:18Z

Thanks @sahitya-chandra !! Approved

sahitya-chandra · 2025-09-22T12:23:09Z

@hariombalhara sir this didn't get auto-merged yet!!

hariombalhara · 2025-09-22T13:04:03Z

Getting it merged @sahitya-chandra !! Sorry

github-actions · 2025-09-22T14:25:31Z

E2E results are ready!

Workflow #79524.2 latest results

sahitya-chandra · 2025-09-22T19:19:18Z

@hariombalhara thanks a lot sir, for guiding me throughout this PR...

* fix: added block display to .cal-embed * fixed the iframe color-scheme to unset and bg transparent * removed forced CSS * changes reverted from iframe * Add comments and remove background transparent as it is still not needed --------- Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

fix: added block display to .cal-embed

aac57ff

sahitya-chandra requested a review from a team as a code owner July 28, 2025 13:19

graphite-app bot added the community Created by Linear-GitHub Sync label Jul 28, 2025

graphite-app bot requested a review from a team July 28, 2025 13:19

sahitya-chandra marked this pull request as draft July 28, 2025 13:19

github-actions bot added the embed area: embed, widget, react embed label Jul 28, 2025

dosubot bot added the 🐛 bug Something isn't working label Jul 28, 2025

coderabbitai bot reviewed Jul 28, 2025

View reviewed changes

packages/embeds/embed-core/src/embed.css Show resolved Hide resolved

fixed the iframe color-scheme to unset and bg transparent

5062f60

sahitya-chandra marked this pull request as ready for review July 28, 2025 13:51

anikdhabal requested a review from hariombalhara July 28, 2025 13:52

sahitya-chandra and others added 3 commits July 29, 2025 14:14

Merge branch 'main' into cal-6163

e9e0f25

Merge branch 'main' into cal-6163

0194b99

Merge branch 'main' into cal-6163

08b551f

hariombalhara requested changes Aug 8, 2025

View reviewed changes

sahitya-chandra added 2 commits August 8, 2025 15:04

Merge branch 'main' into cal-6163

aa8a45c

removed forced CSS

9c82c7d

sahitya-chandra requested a review from hariombalhara August 8, 2025 09:37

hariombalhara reviewed Aug 8, 2025

View reviewed changes

changes reverted from iframe

1923c33

sahitya-chandra requested a review from hariombalhara August 8, 2025 10:21

sahitya-chandra added 4 commits August 9, 2025 17:07

Merge branch 'main' into cal-6163

2af06fa

Merge branch 'main' into cal-6163

8072c42

Merge branch 'main' into cal-6163

2114cd0

Merge branch 'main' into cal-6163

ebd3133

pull-request-size bot added the size/XS label Sep 3, 2025

sahitya-chandra requested a review from hariombalhara September 3, 2025 07:06

Merge branch 'main' into cal-6163

b7b97ca

sahitya-chandra and others added 3 commits September 5, 2025 13:32

Merge branch 'main' into cal-6163

a07696a

Merge branch 'main' into cal-6163

3391711

Add comments and remove background transparent as it is still not needed

e26a599

hariombalhara approved these changes Sep 8, 2025

View reviewed changes

hariombalhara enabled auto-merge (squash) September 8, 2025 10:16

sahitya-chandra added 4 commits September 8, 2025 18:43

Merge branch 'main' into cal-6163

b1ab9fb

Merge branch 'main' into cal-6163

22e3b2f

Merge branch 'main' into cal-6163

8161eb2

Merge branch 'main' into cal-6163

b6f9008

keithwillcode approved these changes Sep 22, 2025

View reviewed changes

graphite-app bot added the ready-for-e2e label Sep 22, 2025

keithwillcode added ready-for-e2e and removed ready-for-e2e labels Sep 22, 2025

keithwillcode added this to the v5.8 milestone Sep 22, 2025

Merge branch 'main' into cal-6163

5897028

hariombalhara merged commit 5463dc2 into calcom:main Sep 22, 2025
54 of 61 checks passed

sahitya-chandra deleted the cal-6163 branch September 22, 2025 19:17

		document.documentElement.style.colorScheme = colorScheme \|\| "unset";
		document.body.style.background = "transparent";

Comments

Conversation

sahitya-chandra commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Visual Demo (For contributors especially)

Video Demo (if applicable):

Image Demo (if applicable):

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Checklist

Uh oh!

coderabbitai bot commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Assessment against linked issues

Assessment against linked issues: Out-of-scope changes

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

vercel bot commented Jul 28, 2025

Uh oh!

graphite-app bot commented Jul 28, 2025

Graphite Automations

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

anikdhabal commented Aug 8, 2025

Uh oh!

hariombalhara Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

sahitya-chandra Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

hariombalhara Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

hariombalhara Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

hariombalhara Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

hariombalhara Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

sahitya-chandra commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

main branch

cal-6163 branch(current branch)

Uh oh!

sahitya-chandra commented Sep 3, 2025

Uh oh!

sahitya-chandra commented Sep 4, 2025

Uh oh!

hariombalhara commented Sep 4, 2025

Uh oh!

hariombalhara commented Sep 8, 2025

Uh oh!

sahitya-chandra commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hariombalhara commented Sep 22, 2025

Uh oh!

github-actions bot commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

Uh oh!

sahitya-chandra commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sahitya-chandra commented Jul 28, 2025 •

edited

Loading

coderabbitai bot commented Jul 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

sahitya-chandra commented Sep 3, 2025 •

edited

Loading

sahitya-chandra commented Sep 22, 2025 •

edited

Loading

github-actions bot commented Sep 22, 2025 •

edited

Loading

sahitya-chandra commented Sep 22, 2025 •

edited

Loading