feat: implement DynamicMinHeight component for responsive layout

- Added a new `DynamicMinHeight` component to calculate and set the minimum height dynamically based on header and onboarding banner heights.
- Replaced static height calculations in the layout with the new component to enhance responsiveness.
- Updated `OnboardingTracker` component to include an ID for the onboarding banner, allowing for accurate height calculations.

Author: Marfuen

apps/app/src/app/(app)/[orgId]/components/DynamicMinHeight.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { cn } from '@comp/ui/cn';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+interface DynamicMinHeightProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DynamicMinHeight({ children, className }: DynamicMinHeightProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [offsetPx, setOffsetPx] = useState<number>(0);
+
+  useEffect(() => {
+    const headerEl = document.querySelector('header.sticky') as HTMLElement | null;
+    const bannerEl = document.getElementById('onboarding-banner') as HTMLElement | null;
+
+    const compute = () => {
+      const header = headerEl?.offsetHeight ?? 0;
+      const banner = bannerEl?.offsetHeight ?? 0;
+      // Add 1px border for each element like the server calculation did
+      const extra = 0; // borders already included in offsetHeight
+      setOffsetPx(header + banner + extra);
+    };
+
+    compute();
+
+    const resizeObserver = new ResizeObserver(() => compute());
+    if (headerEl) resizeObserver.observe(headerEl);
+    if (bannerEl) resizeObserver.observe(bannerEl);
+
+    const onResize = () => compute();
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  const style = useMemo(() => ({ minHeight: `calc(100vh - ${offsetPx}px)` }), [offsetPx]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('textured-background mx-auto px-4 py-4', className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

apps/app/src/app/(app)/[orgId]/components/OnboardingTracker.tsx

@@ -197,7 +197,10 @@ export const OnboardingTracker = ({ onboarding }: { onboarding: Onboarding }) =>
   }
 
   return (
-    <Card className="w-full overflow-hidden rounded-none border-x-0 border-t-0">
+    <Card
+      id="onboarding-banner"
+      className="w-full overflow-hidden rounded-none border-x-0 border-t-0"
+    >
       <CardContent className="bg-background flex flex-col items-center justify-center">
         <div className="w-full pt-4">{renderStatusContent()}</div>
       </CardContent>

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -11,6 +11,7 @@ import dynamic from 'next/dynamic';
 import { cookies, headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
+import { DynamicMinHeight } from './components/DynamicMinHeight';
 import { OnboardingTracker } from './components/OnboardingTracker';
 
 const HotKeys = dynamic(() => import('@/components/hot-keys').then((mod) => mod.HotKeys), {
@@ -57,8 +58,6 @@ export default async function Layout({
     },
   });
 
-  console.log('member', member);
-
   if (!member) {
     // User doesn't have access to this organization
     return redirect('/auth/unauthorized');
@@ -80,12 +79,6 @@ export default async function Layout({
     },
   });
 
-  const isOnboardingRunning = !!onboarding?.triggerJobId && !onboarding.triggerJobCompleted;
-  const navbarHeight = 53 + 1; // 1 for border
-  const onboardingHeight = 132 + 1; // 1 for border
-
-  const pixelsOffset = isOnboardingRunning ? navbarHeight + onboardingHeight : navbarHeight;
-
   return (
     <TriggerTokenProvider
       triggerJobId={onboarding?.triggerJobId || undefined}
@@ -95,12 +88,7 @@ export default async function Layout({
         <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
           {onboarding?.triggerJobId && <OnboardingTracker onboarding={onboarding} />}
           <Header />
-          <div
-            className="textured-background mx-auto px-4 py-4"
-            style={{ minHeight: `calc(100vh - ${pixelsOffset}px)` }}
-          >
-            {children}
-          </div>
+          <DynamicMinHeight>{children}</DynamicMinHeight>
           <AssistantSheet />
           <Suspense fallback={null}>
             <CheckoutCompleteDialog orgId={organization.id} />