apunkt/plano
1
0
Fork 0
mirror of https://github.com/katanemo/plano.git synced 2026-06-29 15:49:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

fixed the scrolling issue

Browse source
This commit is contained in:
Salman Paracha 2025-07-03 16:17:21 -07:00
parent ad2f20c3e3
commit f8cd8aec60
1 changed files with 89 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

30
demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js
View file

@ -233,8 +233,10 @@ export default function PreferenceBasedModelSelector() {
}; };
return ( return (
<div className="w-full max-w-[600px] bg-gray-50 dark:bg-gray-800 p-4 mx-auto"> <div className="w-full max-w-[600px] h-[65vh] flex flex-col bg-gray-50 dark:bg-gray-800 p-4 mx-auto">
<div className="space-y-4">
{/* Scrollable preferences only */}
<div className="space-y-4 overflow-y-auto flex-1 pr-1 max-h-[60vh]">
<Card className="w-full"> <Card className="w-full">
<CardContent> <CardContent>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -268,19 +270,31 @@ export default function PreferenceBasedModelSelector() {
</option> </option>
))} ))}
</select> </select>
<Button variant="ghost" size="icon" onClick={() => removePreference(pref.id)} disabled={preferences.length <= 1}> <Button
variant="ghost"
size="icon"
onClick={() => removePreference(pref.id)}
disabled={preferences.length <= 1}
>
<Trash2 className="h-4 w-4 text-gray-500 hover:text-red-600" /> <Trash2 className="h-4 w-4 text-gray-500 hover:text-red-600" />
</Button> </Button>
</div> </div>
))} ))}
<Button variant="outline" onClick={addPreference} className="flex items-center gap-2 text-sm mt-2"> <Button
variant="outline"
onClick={addPreference}
className="flex items-center gap-2 text-sm mt-2"
>
<PlusCircle className="h-4 w-4" /> Add Preference <PlusCircle className="h-4 w-4" /> Add Preference
</Button> </Button>
</div> </div>
)} )}
</CardContent> </CardContent>
</Card> </Card>
<Card className="w-full"> </div>
{/* Default model selector (static) */}
<Card className="w-full mt-4">
<CardContent> <CardContent>
<Label>Default Model</Label> <Label>Default Model</Label>
<select <select
@ -300,13 +314,15 @@ export default function PreferenceBasedModelSelector() {
</select> </select>
</CardContent> </CardContent>
</Card> </Card>
<div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
{/* Save/Cancel footer (static) */}
<div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 mt-4">
<Button variant="ghost" onClick={handleCancel}> <Button variant="ghost" onClick={handleCancel}>
Cancel Cancel
</Button> </Button>
<Button onClick={handleSave}>Save and Apply</Button> <Button onClick={handleSave}>Save and Apply</Button>
</div> </div>
</div>
</div> </div>
); );
} }