Repository navigation
fix(ui): calendly height + prominent share bar - #2410
Merged
Merged
Conversation
- Calendly inline embed now sets an explicit responsive height on the container (the injected iframe uses height:100%, which collapsed with only a min-height, causing the tiny strip + endless spinner). Also guard against double-init, theme the widget for dark mode, and add an "open in new tab" fallback link. - Replace the hidden "Share Results" dropdown on the token cost calculator with a prominent share bar: branded gradient, savings-led copy, and one-click Copy / X / LinkedIn actions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
WalkthroughTwo independent UI component refinements: Calendly inline widget initialization is now guarded by a per-mount ref and applies dark-mode-aware theming; token calculator share UI is simplified from a dropdown menu to an inline bar with copy and social-link buttons. ChangesCalendly Inline Widget Enhancement
Token Calculator Share UI Simplification
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
smakosh
enabled auto-merge
May 25, 2026 19:23
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/ui/src/components/enterprise/calendly-inline.tsx`:
- Around line 47-58: The code sets initializedRef.current = true before
constructing widgetUrl and calling window.Calendly.initInlineWidget, which can
permanently block re-init if URL parsing or init throws; change the flow to
perform the URL construction and call window.Calendly.initInlineWidget first
(wrap these steps in a try/catch to handle errors) and only set
initializedRef.current = true after init completes successfully, ensuring
failures do not leave initializedRef stuck true; reference the initializedRef,
widgetUrl, and window.Calendly.initInlineWidget symbols when making this change.
- Around line 83-90: Replace the raw anchor in the CalendlyInline component with
Next.js' Link: import Link from "next/link", swap the <a href={url} ...>Open the
scheduler</a> for <Link href={url} ...>Open the scheduler</Link>, preserving
className, target="_blank" and rel="noopener noreferrer" props (and any other
props like aria attributes) so behavior and styling remain the same; update any
surrounding code that expects an HTMLAnchorElement if necessary (e.g., event
handlers) to use the Link component instead.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3d5f61e1-e1cf-4e10-ba48-4358ad971e94
📒 Files selected for processing (2)
apps/ui/src/components/enterprise/calendly-inline.tsxapps/ui/src/components/token-cost-calculator/token-cost-calculator-client.tsx
Comment on lines
+47
to
+58
| initializedRef.current = true; | ||
|
|
||
| const widgetUrl = new URL(url); | ||
| widgetUrl.searchParams.set("hide_gdpr_banner", "1"); | ||
| widgetUrl.searchParams.set("primary_color", "2563eb"); | ||
| if (document.documentElement.classList.contains("dark")) { | ||
| widgetUrl.searchParams.set("background_color", "0a0a0a"); | ||
| widgetUrl.searchParams.set("text_color", "e4e4e7"); | ||
| } | ||
|
|
||
| window.Calendly.initInlineWidget({ | ||
| url, | ||
| url: widgetUrl.toString(), |
Contributor
There was a problem hiding this comment.
Set initializedRef only after successful widget init.
initializedRef.current = true happens before URL parsing/init. If either throws, the component is permanently locked out of re-initialization for that mount.
Proposed fix
- initializedRef.current = true;
-
- const widgetUrl = new URL(url);
+ const widgetUrl = new URL(url);
widgetUrl.searchParams.set("hide_gdpr_banner", "1");
widgetUrl.searchParams.set("primary_color", "2563eb");
if (document.documentElement.classList.contains("dark")) {
widgetUrl.searchParams.set("background_color", "0a0a0a");
widgetUrl.searchParams.set("text_color", "e4e4e7");
}
window.Calendly.initInlineWidget({
url: widgetUrl.toString(),
parentElement: container,
prefill: { name, email },
});
+ initializedRef.current = true;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| initializedRef.current = true; | |
| const widgetUrl = new URL(url); | |
| widgetUrl.searchParams.set("hide_gdpr_banner", "1"); | |
| widgetUrl.searchParams.set("primary_color", "2563eb"); | |
| if (document.documentElement.classList.contains("dark")) { | |
| widgetUrl.searchParams.set("background_color", "0a0a0a"); | |
| widgetUrl.searchParams.set("text_color", "e4e4e7"); | |
| } | |
| window.Calendly.initInlineWidget({ | |
| url, | |
| url: widgetUrl.toString(), | |
| const widgetUrl = new URL(url); | |
| widgetUrl.searchParams.set("hide_gdpr_banner", "1"); | |
| widgetUrl.searchParams.set("primary_color", "2563eb"); | |
| if (document.documentElement.classList.contains("dark")) { | |
| widgetUrl.searchParams.set("background_color", "0a0a0a"); | |
| widgetUrl.searchParams.set("text_color", "e4e4e7"); | |
| } | |
| window.Calendly.initInlineWidget({ | |
| url: widgetUrl.toString(), | |
| parentElement: container, | |
| prefill: { name, email }, | |
| }); | |
| initializedRef.current = true; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/ui/src/components/enterprise/calendly-inline.tsx` around lines 47 - 58,
The code sets initializedRef.current = true before constructing widgetUrl and
calling window.Calendly.initInlineWidget, which can permanently block re-init if
URL parsing or init throws; change the flow to perform the URL construction and
call window.Calendly.initInlineWidget first (wrap these steps in a try/catch to
handle errors) and only set initializedRef.current = true after init completes
successfully, ensuring failures do not leave initializedRef stuck true;
reference the initializedRef, widgetUrl, and window.Calendly.initInlineWidget
symbols when making this change.
Comment on lines
+83
to
+90
| <a | ||
| href={url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="font-medium text-blue-600 underline-offset-4 hover:underline dark:text-blue-400" | ||
| > | ||
| Open the scheduler | ||
| </a> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Use next/link instead of a raw anchor in apps/ui.
Switch this link to Link to match repo frontend navigation standards.
Proposed fix
+import Link from "next/link";
...
- <a
+ <Link
href={url}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-blue-600 underline-offset-4 hover:underline dark:text-blue-400"
>
Open the scheduler
- </a>
+ </Link>As per coding guidelines, "Use next/link for links and next/navigation's router for programmatic navigation".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/ui/src/components/enterprise/calendly-inline.tsx` around lines 83 - 90,
Replace the raw anchor in the CalendlyInline component with Next.js' Link:
import Link from "next/link", swap the <a href={url} ...>Open the scheduler</a>
for <Link href={url} ...>Open the scheduler</Link>, preserving className,
target="_blank" and rel="noopener noreferrer" props (and any other props like
aria attributes) so behavior and styling remain the same; update any surrounding
code that expects an HTMLAnchorElement if necessary (e.g., event handlers) to
use the Link component instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Branched off latest
main. Twoapps/uifixes.1. Enterprise Calendly widget rendered as a sliver / loaded forever
The inline embed container had only
min-h-[700px]. Calendly injects an iframe withheight:100%, and a percentage height needs a definite parent height, so it collapsed to a thin strip with a perpetual loading spinner below it (per the reported screenshot).Fixes in
calendly-inline.tsx:h-[1040px]mobile /sm:h-[720px]) so the iframe fills it.background_color/text_color) andhide_gdpr_banner, so the white panel no longer clashes with the dark page.2. Token cost calculator share button was easy to miss
Replaced the small, right-aligned "Share Results" dropdown with a prominent share bar.
Testing
pnpm format✅pnpm turbo run build --filter=ui✅ (13/13)🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style