fix(onboarding): prevent floating footer from overlapping bio textare…#28935
fix(onboarding): prevent floating footer from overlapping bio textare…#28935Adityakk9031 wants to merge 1 commit intocalcom:mainfrom
Conversation
…a on smaller viewports
|
Welcome to Cal.diy, @Adityakk9031! Thanks for opening this pull request. A few things to keep in mind:
A maintainer will review your PR soon. Thanks for contributing! |
📝 WalkthroughWalkthroughUI layout behavior for an onboarding card was adjusted: the footer no longer uses absolute overlay positioning and now participates in normal flow while sticking to the bottom. Server-side signup handlers (token-based and self-hosted flows) refined the existing-user conflict check to only treat a mismatch as a conflict when the existing user's 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/modules/onboarding/components/OnboardingCard.tsx (1)
85-85: Hard-coded rgba colors bypass theme tokens.
bg-[rgba(255,255,255,0.01)]is effectively transparent and, combined with the hard-coded shadow rgba values, won't adapt to dark mode the way theme tokens (e.g.,bg-default/bg-mutedwithborder-subtle) would. Since you're already touching this element, consider switching to the design-system tokens used elsewhere in the onboarding surface so the floating footer reads correctly across themes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/modules/onboarding/components/OnboardingCard.tsx` at line 85, The floating footer div in OnboardingCard.tsx uses hard-coded RGBA classes (bg-[rgba(255,255,255,0.01)] and shadow-[...rgba(...)]) which won't respect dark mode or design tokens; replace these with the design-system theme tokens used elsewhere in the onboarding surface (for example use bg-default or bg-muted and border-subtle / shadow-subtle token classes) so the background, border and shadow adapt across themes, and remove the inline rgba shadow classes from the sticky div to use the tokenized shadow classes instead.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/web/modules/onboarding/components/OnboardingCard.tsx`:
- Line 85: The floating footer div in OnboardingCard.tsx uses hard-coded RGBA
classes (bg-[rgba(255,255,255,0.01)] and shadow-[...rgba(...)]) which won't
respect dark mode or design tokens; replace these with the design-system theme
tokens used elsewhere in the onboarding surface (for example use bg-default or
bg-muted and border-subtle / shadow-subtle token classes) so the background,
border and shadow adapt across themes, and remove the inline rgba shadow classes
from the sticky div to use the tokenized shadow classes instead.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d8e4cd4d-a108-47e6-90d9-7b6fe49f685d
📒 Files selected for processing (1)
apps/web/modules/onboarding/components/OnboardingCard.tsx
|
@dhairyashiil have a look please |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/app/api/auth/signup/handlers/calcomSignupHandler.ts`:
- Around line 102-108: The if-statement that checks existingUser.invitedTo vs
foundToken.teamId (the block returning NextResponse.json with
SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS) is over-indented by one level; adjust
the indentation of that entire if block so it aligns with the surrounding code
inside the if (foundToken?.teamId) block (i.e., reduce one indentation level) to
satisfy Prettier/ESLint while keeping the logic (existingUser,
foundToken.teamId, SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS, NextResponse.json)
unchanged.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 003db49d-dd96-41b6-83f3-d1e87ba6cd0e
📒 Files selected for processing (3)
apps/web/app/api/auth/signup/handlers/calcomSignupHandler.tsapps/web/app/api/auth/signup/handlers/selfHostedHandler.tspackages/features/auth/lib/next-auth-options.ts
| if ( | ||
| existingUser && | ||
| existingUser.invitedTo !== null && | ||
| existingUser.invitedTo !== foundToken.teamId | ||
| ) { | ||
| return NextResponse.json({ message: SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS }, { status: 409 }); | ||
| } |
There was a problem hiding this comment.
Fix indentation — over-indented by one level.
Lines 102-108 are indented at 8 spaces while the surrounding block inside if (foundToken?.teamId) uses 6 spaces (see Lines 98-101 and 109). This will likely trip Prettier/ESLint and produce a noisy diff.
✏️ Proposed fix
- if (
- existingUser &&
- existingUser.invitedTo !== null &&
- existingUser.invitedTo !== foundToken.teamId
- ) {
- return NextResponse.json({ message: SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS }, { status: 409 });
- }
+ if (
+ existingUser &&
+ existingUser.invitedTo !== null &&
+ existingUser.invitedTo !== foundToken.teamId
+ ) {
+ return NextResponse.json({ message: SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS }, { status: 409 });
+ }The logic change itself mirrors selfHostedHandler.ts and matches the test-suite expectations — LGTM on behavior.
📝 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.
| if ( | |
| existingUser && | |
| existingUser.invitedTo !== null && | |
| existingUser.invitedTo !== foundToken.teamId | |
| ) { | |
| return NextResponse.json({ message: SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS }, { status: 409 }); | |
| } | |
| if ( | |
| existingUser && | |
| existingUser.invitedTo !== null && | |
| existingUser.invitedTo !== foundToken.teamId | |
| ) { | |
| return NextResponse.json({ message: SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS }, { status: 409 }); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/app/api/auth/signup/handlers/calcomSignupHandler.ts` around lines
102 - 108, The if-statement that checks existingUser.invitedTo vs
foundToken.teamId (the block returning NextResponse.json with
SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS) is over-indented by one level; adjust
the indentation of that entire if block so it aligns with the surrounding code
inside the if (foundToken?.teamId) block (i.e., reduce one indentation level) to
satisfy Prettier/ESLint while keeping the logic (existingUser,
foundToken.teamId, SIGNUP_ERROR_CODES.USER_ALREADY_EXISTS, NextResponse.json)
unchanged.
romitg2
left a comment
romitg2
left a comment
There was a problem hiding this comment.
please attach before/after screenshots
2 participants
Linked Issue
Closes #28931
Summary
This fixes a responsive layout bug on onboarding "Add your details" where the floating action footer (
Back/Continue) overlaps the Bio textarea on reduced-width windows (split-screen / half width).Root Cause
The onboarding footer was rendered as an absolute overlay, while the content area had insufficient bottom padding. On smaller viewports, the last form field (Bio) could scroll underneath the footer.
Changes
apps/web/modules/onboarding/components/OnboardingCard.tsxabsoluteoverlay tosticky bottom-0in-flow behaviorpb-10topb-24when floating footer is enabledExpected Result
Continuebutton no longer overlaps the Bio textarea