From 35346a981ff7c175cd8097bd3083d0bdd4d377f2 Mon Sep 17 00:00:00 2001
From: "Kai (Tam Nhu) Tran" <61256810+kaitranntt@users.noreply.github.com>
Date: Sat, 9 May 2026 14:20:06 -0400
Subject: [PATCH] fix(ui): keep profile dialog actions visible on small screens
 (#1204)

---
 .../profiles/profile-create-dialog.tsx        | 19 ++++++++++----
 .../profiles/profile-create-dialog.test.tsx   | 25 +++++++++++++++++++
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/profiles/profile-create-dialog.tsx b/ui/src/components/profiles/profile-create-dialog.tsx
index 1cb81e9b..4a53e6d4 100644
--- a/ui/src/components/profiles/profile-create-dialog.tsx
+++ b/ui/src/components/profiles/profile-create-dialog.tsx
@@ -285,8 +285,11 @@ export function ProfileCreateDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <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">
+      <DialogContent
+        data-testid="profile-create-dialog"
+        className="h-[calc(100dvh-2rem)] max-h-[900px] gap-0 overflow-hidden p-0 sm:max-w-[700px] !flex !flex-col"
+      >
+        <DialogHeader className="shrink-0 border-b p-6 pb-4">
           <DialogTitle className="flex items-center gap-2">
             <Plus className="w-5 h-5 text-primary" />
             {t('profileCreateDialog.createProfile')}
@@ -298,7 +301,10 @@ export function ProfileCreateDialog({
           onSubmit={handleSubmit(onSubmit)}
           className="flex flex-col flex-1 min-h-0 overflow-hidden"
         >
-          <div className="border-b bg-muted/10 px-6 py-3 space-y-3">
+          <div
+            data-testid="profile-create-provider-chooser"
+            className="max-h-[34dvh] shrink-0 space-y-3 overflow-y-auto overscroll-contain border-b bg-muted/10 px-6 py-3"
+          >
             <div className="space-y-3">
               <div className="flex items-start justify-between gap-4">
                 <div className="space-y-1">
@@ -398,7 +404,7 @@ export function ProfileCreateDialog({
               </TabsList>
             </div>
 
-            <div className="flex-1 min-h-0 overflow-y-auto">
+            <div data-testid="profile-create-tab-scroll" className="flex-1 min-h-0 overflow-y-auto">
               <TabsContent value="basic" className="p-6 space-y-4 mt-0">
                 {/* Profile Name */}
                 <div className="space-y-1.5">
@@ -672,7 +678,10 @@ export function ProfileCreateDialog({
               </TabsContent>
             </div>
 
-            <DialogFooter className="p-6 pt-4 border-t bg-muted/10">
+            <DialogFooter
+              data-testid="profile-create-footer"
+              className="shrink-0 border-t bg-muted/10 p-6 pt-4"
+            >
               <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                 {t('profileDialog.cancel')}
               </Button>
diff --git a/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx b/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
index 73273d05..345280ec 100644
--- a/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
+++ b/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
@@ -76,6 +76,31 @@ describe('ProfileCreateDialog', () => {
     expect(screen.getByText('Local runtimes')).toBeInTheDocument();
   });
 
+  it('keeps the provider chooser and form body scrollable while the footer stays visible', () => {
+    render(
+      <ProfileCreateDialog
+        open
+        onOpenChange={vi.fn()}
+        onSuccess={vi.fn()}
+        initialMode="openrouter"
+      />
+    );
+
+    expect(screen.getByTestId('profile-create-dialog')).toHaveClass(
+      'h-[calc(100dvh-2rem)]',
+      'overflow-hidden'
+    );
+    expect(screen.getByTestId('profile-create-provider-chooser')).toHaveClass(
+      'max-h-[34dvh]',
+      'overflow-y-auto'
+    );
+    expect(screen.getByTestId('profile-create-tab-scroll')).toHaveClass(
+      'flex-1',
+      'overflow-y-auto'
+    );
+    expect(screen.getByTestId('profile-create-footer')).toHaveClass('shrink-0');
+  });
+
   it('steers the Hugging Face preset to the droid target by default', async () => {
     render(
       <ProfileCreateDialog