fix: onboarding "Continue" button overlaps Bio textarea on small viewports

[caelshepley]

What does this PR do?

Fixes a responsive layout bug on the onboarding "Add your details" screen where
the floating "Continue" button overlaps the Bio textarea at reduced viewport widths
(e.g. split screen / ~50% window width).

• Fixes Onboarding: Continue button overlaps bio textarea on smaller viewports #28931

Root causes identified:

• floatingFooter used position: absolute, causing it to visually overlay content
  beneath it regardless of scroll position
• The content container lacked overflow-y: auto, so tall content couldn't scroll
• The parent card container in OnboardingLayout had overflow-hidden, clipping content

Changes made:

• OnboardingCard.tsx: Changed floating footer from absolute to sticky bottom-0
  so it anchors to the bottom of the scroll container without overlapping content
• OnboardingCard.tsx: Added overflow-y-auto to the content div and increased
  bottom padding (pb-16) so content isn't hidden behind the sticky footer
• OnboardingLayout.tsx: Changed overflow-hidden to overflow-auto on the card
  container to allow scrolling at narrow viewports

Visual Demo

Recording.2026-04-26.174746.mp4

Mandatory Tasks

• I have self-reviewed the code
• N/A — no documentation changes required for a layout bug fix
• I confirm the fix is verifiable through manual testing steps below

How should this be tested?

1. Run the app locally and navigate to onboarding → "Add your details" step
2. Resize the browser to approximately 50% width
3. Scroll down to the Bio textarea

Before fix: The "Continue" button floats on top of the Bio field, blocking input

After fix: The content area scrolls independently; the Continue button sticks
to the bottom of the card without overlapping the textarea

[github-actions]

Welcome to Cal.diy, @caelshepley! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes to the onboarding components modify scrolling and layout behavior. The OnboardingLayout component switches the inner grid container's overflow property from overflow-hidden to overflow-auto, enabling content scrolling when needed. The OnboardingCard component enables vertical scrolling on the content area wrapper with overflow-y-auto, increases bottom padding from pb-10 to pb-16 when a floating footer is present, and changes the floating footer positioning from absolute with right-[12px] to sticky with right-0.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main fix: resolving a button overlap issue on small viewports during onboarding.
Linked Issues check	✅ Passed	The PR directly addresses the requirements in issue #28931 by preventing the Continue button overlap through layout and scrolling adjustments.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the button overlap issue with no unrelated modifications to files or features.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly explains the responsive layout bug, root causes, specific changes made to two files, and includes testing instructions with a visual demo.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

apps/web/modules/onboarding/components/OnboardingLayout.tsx (1)

36-42: Consider mirroring the overflow change for column 2.

Column 1’s wrapper has no overflow-hidden, but column 2 (Line 41) still does. If any OnboardingCard rendered into column 2 uses floatingFooter, its new sticky bottom-0 footer will be clipped/non-sticky inside that column the same way the original bug manifested. Aligning column 2 (e.g., overflow-auto or removing the rule) would prevent re-introducing this issue elsewhere, consistent with the PR note that similar overlap exists in other places.

♻️ Suggested change

           {column2 && (
-            <div className="hidden h-full max-h-full min-h-0 flex-col overflow-hidden xl:flex">{column2}</div>
+            <div className="hidden h-full max-h-full min-h-0 flex-col overflow-auto xl:flex">{column2}</div>
           )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/modules/onboarding/components/OnboardingLayout.tsx` around lines 36
- 42, In OnboardingLayout, column2's wrapper div currently uses
"overflow-hidden" which will clip any OnboardingCard floatingFooter/sticky
bottom elements; change the column2 wrapper (the JSX element that renders when
column2 is truthy) to match column1's overflow behavior (e.g., remove
"overflow-hidden" or replace it with "overflow-auto") so sticky/floating footers
inside OnboardingCard remain visible and behave consistently across breakpoints.

🤖 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/OnboardingLayout.tsx`:
- Around line 36-42: In OnboardingLayout, column2's wrapper div currently uses
"overflow-hidden" which will clip any OnboardingCard floatingFooter/sticky
bottom elements; change the column2 wrapper (the JSX element that renders when
column2 is truthy) to match column1's overflow behavior (e.g., remove
"overflow-hidden" or replace it with "overflow-auto") so sticky/floating footers
inside OnboardingCard remain visible and behave consistently across breakpoints.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 694a131a-0209-4e16-816e-f2d677876441

📥 Commits

Reviewing files that changed from the base of the PR and between 987fe91 and 76dc697.

📒 Files selected for processing (2)

• apps/web/modules/onboarding/components/OnboardingCard.tsx
• apps/web/modules/onboarding/components/OnboardingLayout.tsx

[romitg2]

@caelshepley Thanks for PR! please add both before and after video demo.

[caelshepley]

@romitg2 Before the button is stuck on top of bio:

Screen.Recording.2026-04-27.084946.mp4