electron-rare/exo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: model dropdown positioning on onboarding chat screen + sort models biggest-first

Browse Source 
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 <[email protected]>
This commit is contained in:
Alex Cheema
2026-02-21 11:07:46 -08:00
co-authored by Claude Opus 4.6
parent c72a543088
commit f303b396f3
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/app.css
+8 -1
View File
@@ -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;
}
dashboard/src/routes/+page.svelte
+5 -9
View File
@@ -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"