tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-15 16:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): keep profile dialog actions visible on small screens (#1204)

Browse Source
This commit is contained in:
Kai (Tam Nhu) Tran
2026-05-09 14:20:06 -04:00
committed by GitHub
parent 2d382d5474
commit 35346a981f
2 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/profiles/profile-create-dialog.tsx
+14 -5
View File
@@ -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>
ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
+25
View File
@@ -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