commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: onboarding "Continue" button overlaps Bio textarea on small viewports (#29046)

Browse Source 
* Update OnboardingCard.tsx

* Update OnboardingLayout.tsx
This commit is contained in:
Cael Shepley
2026-04-29 12:33:21 +00:00
committed by GitHub
parent c2c95b371a
commit 44ccc72f99
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/onboarding/components/OnboardingCard.tsx
+3 -3
View File
@@ -65,8 +65,8 @@ export const OnboardingCard = ({
{/* Content */}
<div
className={`flex h-full min-h-0 w-full flex-1 flex-col gap-4 [container-type:size] ${
floatingFooter ? "pb-10" : ""
className={`flex h-full min-h-0 w-full flex-1 flex-col gap-4 overflow-y-auto [container-type:size] ${
floatingFooter ? "pb-16" : ""
}`}>
{isLoading ? (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
@@ -82,7 +82,7 @@ export const OnboardingCard = ({
{/* Footer */}
{floatingFooter ? (
<div className="absolute bottom-0 left-0 right-[12px] z-10 flex items-center justify-start rounded-[12px] bg-[rgba(255,255,255,0.01)] p-2 shadow-[0px_12px_32px_-6px_rgba(0,0,0,0.12),0px_0px_0px_1px_rgba(111,107,107,0.1),0px_1px_3px_0px_rgba(63,70,75,0.1)] backdrop-blur-[6px] backdrop-filter">
<div className="sticky bottom-0 left-0 right-0 z-10 flex items-center justify-start rounded-[12px] bg-[rgba(255,255,255,0.01)] p-2 shadow-[0px_12px_32px_-6px_rgba(0,0,0,0.12),0px_0px_0px_1px_rgba(111,107,107,0.1),0px_1px_3px_0px_rgba(63,70,75,0.1)] backdrop-blur-[6px] backdrop-filter">
{footer}
</div>
) : (
apps/web/modules/onboarding/components/OnboardingLayout.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OnboardingLayout = ({ userEmail, currentStep, totalSteps, children
{/* Logo and container - centered */}
<div className="flex w-full flex-1 flex-col items-center justify-center gap-6">
<Logo className="mt-4 h-5 w-auto shrink-0" />
<div className="border-subtle bg-default grid max-h-[690px] min-h-0 w-full max-w-[532px] flex-1 grid-cols-1 gap-12 overflow-hidden rounded-2xl border px-4 py-2 sm:px-12 sm:py-10 xl:h-[690px] xl:max-w-[1130px] xl:grid-cols-[40%_1fr] xl:pl-10 xl:pr-0">
<div className="border-subtle bg-default grid max-h-[690px] min-h-0 w-full max-w-[532px] flex-1 grid-cols-1 gap-12 overflow-auto rounded-2xl border px-4 py-2 sm:px-12 sm:py-10 xl:h-[690px] xl:max-w-[1130px] xl:grid-cols-[40%_1fr] xl:pl-10 xl:pr-0">
{/* Column 1 - Always visible, 40% on xl+ */}
<div className="flex h-full min-h-0 flex-col">{column1}</div>
{/* Column 2 - Hidden on mobile, visible on xl+, 60% on xl+ */}