Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-09-29 07:05:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): open FloatingGenerateBox selects upward to prevent clipping (fixes #928) (#936)

Browse Source 
The floating generate box is fixed at the bottom of the viewport, so
all of its Select dropdowns (voice profile, language, engine, effects)
opened downward into — or beyond — the window edge. Add side="top" to
each SelectContent so the menus appear above their trigger instead.

Co-authored-by: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
Francesco
2026-07-26 23:33:48 -07:00
committed by Jamie Pine
co-authored by Claude Sonnet 4.6
parent 365c2c31ab
commit a6d736e277
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/Generation/EngineModelSelector.tsx
+1 -1
View File
@@ -139,7 +139,7 @@ export function EngineModelSelector({ form, compact, selectedProfile }: EngineMo
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent side={compact ? 'top' : undefined}>
{availableOptions.map((opt) => ( {availableOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value} className={itemClass}> <SelectItem key={opt.value} value={opt.value} className={itemClass}>
{opt.label} {opt.label}
app/src/components/Generation/FloatingGenerateBox.tsx
+3 -3
View File
@@ -555,7 +555,7 @@ export function FloatingGenerateBox({
<SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all w-full"> <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all w-full">
<SelectValue placeholder={t('generation.voiceSelector.placeholder')} /> <SelectValue placeholder={t('generation.voiceSelector.placeholder')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent side="top">
{profiles?.map((profile) => ( {profiles?.map((profile) => (
<SelectItem key={profile.id} value={profile.id} className="text-xs"> <SelectItem key={profile.id} value={profile.id} className="text-xs">
{profile.name} {profile.name}
@@ -582,7 +582,7 @@ export function FloatingGenerateBox({
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent side="top">
{engineLangs.map((lang) => ( {engineLangs.map((lang) => (
<SelectItem key={lang.value} value={lang.value} className="text-xs"> <SelectItem key={lang.value} value={lang.value} className="text-xs">
{lang.label} {lang.label}
@@ -610,7 +610,7 @@ export function FloatingGenerateBox({
<SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all"> <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
<SelectValue placeholder={t('generation.effects.none')} /> <SelectValue placeholder={t('generation.effects.none')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent side="top">
<SelectItem value="none" className="text-xs"> <SelectItem value="none" className="text-xs">
{t('generation.effects.none')} {t('generation.effects.none')}
</SelectItem> </SelectItem>