mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-12 20:15:40 +00:00
fix(ui): keep profile dialog actions visible on small screens (#1204)
This commit is contained in:
1 parent
2d382d5474
commit
35346a981f
2 files changed
+39
-5
No files matched your search
@@ -285,8 +285,11 @@ 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] !flex !flex-col">
|
<DialogContent
|
||||||
<DialogHeader className="p-6 pb-4 border-b">
|
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">
|
<DialogTitle className="flex items-center gap-2">
|
||||||
<Plus className="w-5 h-5 text-primary" />
|
<Plus className="w-5 h-5 text-primary" />
|
||||||
{t('profileCreateDialog.createProfile')}
|
{t('profileCreateDialog.createProfile')}
|
||||||
@@ -298,7 +301,10 @@ export function ProfileCreateDialog({
|
|||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
className="flex flex-col flex-1 min-h-0 overflow-hidden"
|
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="space-y-3">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="flex items-start justify-between gap-4">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
@@ -398,7 +404,7 @@ export function ProfileCreateDialog({
|
|||||||
</TabsList>
|
</TabsList>
|
||||||
</div>
|
</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">
|
<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">
|
||||||
@@ -672,7 +678,10 @@ export function ProfileCreateDialog({
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
</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)}>
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
{t('profileDialog.cancel')}
|
{t('profileDialog.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -76,6 +76,31 @@ describe('ProfileCreateDialog', () => {
|
|||||||
expect(screen.getByText('Local runtimes')).toBeInTheDocument();
|
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 () => {
|
it('steers the Hugging Face preset to the droid target by default', async () => {
|
||||||
render(
|
render(
|
||||||
<ProfileCreateDialog
|
<ProfileCreateDialog
|
||||||
|
|||||||
Reference in new issue
Block a user