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

* Update OnboardingCard.tsx

* Update OnboardingLayout.tsx

Author: caelshepley

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

@@ -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

@@ -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+ */}