[dev] [Marfuen] mariano/onboarding-tracker (#1747)

* feat(onboarding): add real-time tracking with floating card UI

- Implement real-time onboarding progress tracking using Trigger.dev metadata
- Track individual policy completion status dynamically
- Replace top banner with floating card (bottom-right, 600px height, 400px min width)
- Add expandable policies section showing individual policy statuses
- Replace LogoSpinner with Loader2 for loading states
- Auto-minimize on completion with dismiss functionality
- Remove redundant current step message below title

* feat(onboarding): add localhost prefill button and enhance card shadow

- Add Complete button on localhost to pre-fill organization creation form
- Enhance onboarding tracker card shadow for better visibility
- Auto-fetch frameworks and pre-fill with first 2 visible frameworks

* feat(ui): add responsive padding and improve mobile layouts

- Add responsive padding (px-4 sm:px-6 lg:px-8) to all pages for mobile
- Exclude padding from automation pages, automation overview, and task detail pages
- Make integrations search and category filters mobile-friendly with horizontal scroll
- Fix search input component styling for better mobile experience
- Update cloud-tests and integrations pages to use consistent padding approach

* fix(setup): add handlePrefillAll to useOnboardingForm destructuring

---------

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/cloud-tests/components/EmptyState.tsx

@@ -258,7 +258,7 @@ export function EmptyState({ onBack, connectedProviders = [], onConnected }: Emp
   // AWS Step 2.5: Region Selection (after credential validation)
   if (step === 'validate-aws' && provider && selectedProvider === 'aws') {
     return (
-      <div className="container mx-auto flex min-h-[600px] w-full flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <div className="mx-auto max-w-7xl flex min-h-[600px] w-full flex-col gap-6 py-4 md:py-6 lg:py-8">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="sm" onClick={() => setStep('connect')}>
             <ArrowLeft className="mr-2 h-4 w-4" />
@@ -413,7 +413,7 @@ export function EmptyState({ onBack, connectedProviders = [], onConnected }: Emp
     const fields = PROVIDER_FIELDS[provider.id];
 
     return (
-      <div className="container mx-auto flex min-h-[600px] w-full flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <div className="mx-auto max-w-7xl flex min-h-[600px] w-full flex-col gap-6 py-4 md:py-6 lg:py-8">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="sm" onClick={handleBack}>
             <ArrowLeft className="mr-2 h-4 w-4" />

apps/app/src/app/(app)/[orgId]/cloud-tests/components/TestsLayout.tsx

@@ -199,7 +199,7 @@ export function TestsLayout({
     const providerFindings = findingsByProvider[provider.integrationId] ?? [];
 
     return (
-      <div className="container mx-auto flex w-full flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <div className="mx-auto max-w-7xl flex w-full flex-col gap-6 py-4 md:py-6 lg:py-8">
         <div className="flex items-center justify-between">
           <div className="space-y-1">
             <h1 className="text-2xl font-semibold tracking-tight">Cloud Security Tests</h1>

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+export function ConditionalPaddingWrapper({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  // Don't add padding for automation pages, automation overview pages, and task detail pages
+  const isAutomationPage = pathname?.includes('/automation/');
+  const isAutomationOverviewPage = pathname?.includes('/automations/');
+  const isTaskDetailPage = pathname?.match(/\/tasks\/[^/]+$/) !== null; // Matches /tasks/[taskId] but not /tasks/[taskId]/automation
+
+  if (isAutomationPage || isAutomationOverviewPage || isTaskDetailPage) {
+    return <>{children}</>;
+  }
+
+  return <div className="px-4 sm:px-6 lg:px-8">{children}</div>;
+}