fix(ui): make api profile dialog scrollable on small screens

This commit is contained in:
Tam Nhu Tran
2026-02-20 12:31:19 +07:00
parent 7efbac6c1a
commit faa610f843
@@ -236,7 +236,7 @@ export function ProfileCreateDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[700px] p-0 gap-0 overflow-hidden max-h-[90vh]"> <DialogContent className="sm:max-w-[700px] p-0 gap-0 overflow-hidden max-h-[90vh] flex flex-col">
<DialogHeader className="p-6 pb-4 border-b"> <DialogHeader className="p-6 pb-4 border-b">
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
<Plus className="w-5 h-5 text-primary" /> <Plus className="w-5 h-5 text-primary" />
@@ -247,7 +247,10 @@ export function ProfileCreateDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col overflow-hidden"> <form
onSubmit={handleSubmit(onSubmit)}
className="flex flex-col flex-1 min-h-0 overflow-hidden"
>
{/* Provider Preset Cards - Compact horizontal layout */} {/* Provider Preset Cards - Compact horizontal layout */}
<div className="px-6 py-3 border-b bg-muted/30 space-y-2"> <div className="px-6 py-3 border-b bg-muted/30 space-y-2">
{/* Main Options: OpenRouter + Custom */} {/* Main Options: OpenRouter + Custom */}
@@ -304,7 +307,7 @@ export function ProfileCreateDialog({
<Tabs <Tabs
value={activeTab} value={activeTab}
onValueChange={setActiveTab} onValueChange={setActiveTab}
className="flex flex-col flex-1 overflow-hidden" className="flex flex-col flex-1 min-h-0 overflow-hidden"
> >
<div className="px-6 pt-4"> <div className="px-6 pt-4">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">
@@ -323,7 +326,7 @@ export function ProfileCreateDialog({
</TabsList> </TabsList>
</div> </div>
<ScrollArea className="flex-1"> <ScrollArea className="flex-1 min-h-0">
<TabsContent value="basic" className="p-6 space-y-4 mt-0"> <TabsContent value="basic" className="p-6 space-y-4 mt-0">
{/* Profile Name */} {/* Profile Name */}
<div className="space-y-1.5"> <div className="space-y-1.5">