From f303b396f35451092ec0c751e1ab83a38d673c8e Mon Sep 17 00:00:00 2001
From: Alex Cheema <alexcheema123@gmail.com>
Date: Fri, 20 Feb 2026 10:30:00 -0800
Subject: [PATCH] fix: model dropdown positioning on onboarding chat screen +
 sort models biggest-first

The model selector dropdown on step 9 (chat input) was appearing in the
top-right corner because CSS transform in the onb-fade-in animation
created a containing block for fixed-position elements. Added a new
onb-fade-opacity keyframe (opacity only, no transform) for step 9.

Also simplified onboarding model list to show biggest-to-smallest models
that fit in available memory.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 dashboard/src/app.css             |  9 ++++++++-
 dashboard/src/routes/+page.svelte | 14 +++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/dashboard/src/app.css b/dashboard/src/app.css
index 7819f4d7..69f1527c 100644
--- a/dashboard/src/app.css
+++ b/dashboard/src/app.css
@@ -344,6 +344,12 @@ input:focus, textarea:focus {
 	to { opacity: 1; transform: none; }
 }
 
+/* Opacity-only fade-in — no transform, safe for containers with fixed-position children */
+@keyframes onb-fade-opacity {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
 /* Respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
 	.shooting-star,
@@ -366,7 +372,8 @@ input:focus, textarea:focus {
 	.onboarding-connection-line-red {
 		animation: none;
 	}
-	[style*="onb-fade-in"] {
+	[style*="onb-fade-in"],
+	[style*="onb-fade-opacity"] {
 		animation: none !important;
 		opacity: 1 !important;
 	}
diff --git a/dashboard/src/routes/+page.svelte b/dashboard/src/routes/+page.svelte
index 7484fb75..62600c2d 100644
--- a/dashboard/src/routes/+page.svelte
+++ b/dashboard/src/routes/+page.svelte
@@ -543,17 +543,12 @@
     }
   });
 
-  // Recommended models for onboarding (sorted by fit, then size desc, limited to 6)
+  // Recommended models for onboarding (biggest to smallest that fit, limited to 6)
   const onboardingModels = $derived.by(() => {
     if (models.length === 0) return [];
     return [...models]
-      .filter((m) => getModelMemoryFitStatus(m) !== "too_large")
-      .sort((a, b) => {
-        const aFit = hasEnoughMemory(a) ? 0 : 1;
-        const bFit = hasEnoughMemory(b) ? 0 : 1;
-        if (aFit !== bFit) return aFit - bFit;
-        return getModelSizeGB(b) - getModelSizeGB(a);
-      })
+      .filter((m) => hasEnoughMemory(m) && getModelSizeGB(m) > 0)
+      .sort((a, b) => getModelSizeGB(b) - getModelSizeGB(a))
       .slice(0, 6);
   });
 
@@ -3499,9 +3494,10 @@
         </div>
       {:else if onboardingStep === 9}
         <!-- Step 9: Ready — centered input with suggestion chips -->
+        <!-- Uses onb-fade-opacity (no transform) so fixed-position dropdown in ChatForm works correctly -->
         <div
           class="flex flex-col items-center justify-center w-full max-w-2xl px-8"
-          style="opacity: 0; animation: onb-fade-in 0.6s ease forwards;"
+          style="opacity: 0; animation: onb-fade-opacity 0.6s ease forwards;"
         >
           <img
             src="/exo-logo.png"