fix(ui): remove max-h-screen and overflow-y-auto from project and database dialogs

Remove problematic CSS classes from:
- Project creation and management dialogs
- Database backup and restore dialogs
- Compose service management dialogs
- Template and AI generator dialogs

Ensures stable dialog behavior.
This commit is contained in:
Jhon
2025-07-13 12:16:51 -03:00
parent 2d382ea1be
commit 96d0810607
13 changed files with 14 additions and 14 deletions

View File

@@ -126,7 +126,7 @@ export const DeleteService = ({ id, type }: Props) => {
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg"> <DialogContent className="sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
Preview Compose Preview Compose
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto"> <DialogContent className="sm:max-w-6xl max-h-[50rem]">
<DialogHeader> <DialogHeader>
<DialogTitle>Converted Compose</DialogTitle> <DialogTitle>Converted Compose</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -23,7 +23,7 @@ export const ShowUtilities = ({ composeId }: Props) => {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost">Show Utilities</Button> <Button variant="ghost">Show Utilities</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl"> <DialogContent className="sm:max-w-5xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Utilities </DialogTitle> <DialogTitle>Utilities </DialogTitle>
<DialogDescription>Modify the application data</DialogDescription> <DialogDescription>Modify the application data</DialogDescription>

View File

@@ -329,7 +329,7 @@ export const HandleBackup = ({
</Button> </Button>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto"> <DialogContent className="sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{backupId ? "Update Backup" : "Create Backup"} {backupId ? "Update Backup" : "Create Backup"}

View File

@@ -324,7 +324,7 @@ export const RestoreBackup = ({
Restore Backup Restore Backup
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg"> <DialogContent className="sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<RotateCcw className="mr-2 size-4" /> <RotateCcw className="mr-2 size-4" />

View File

@@ -119,7 +119,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
<span>Application</span> <span>Application</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg"> <DialogContent className=" sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle>Create</DialogTitle> <DialogTitle>Create</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -124,7 +124,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
<span>Compose</span> <span>Compose</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl"> <DialogContent className=" sm:max-w-xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Create Compose</DialogTitle> <DialogTitle>Create Compose</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -283,7 +283,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
<span>Database</span> <span>Database</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen md:max-h-[90vh] overflow-y-auto sm:max-w-2xl"> <DialogContent className="md:max-h-[90vh] sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Databases</DialogTitle> <DialogTitle>Databases</DialogTitle>
</DialogHeader> </DialogHeader>

View File

@@ -148,7 +148,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
<span>Template</span> <span>Template</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen sm:max-w-[90vw] p-0"> <DialogContent className="sm:max-w-[90vw] p-0">
<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b"> <DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
<div className="flex flex-col space-y-6"> <div className="flex flex-col space-y-6">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6"> <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

View File

@@ -158,7 +158,7 @@ export const TemplateGenerator = ({ projectId }: Props) => {
<span>AI Assistant</span> <span>AI Assistant</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl w-full flex flex-col"> <DialogContent className="sm:max-w-4xl w-full flex flex-col">
<DialogHeader> <DialogHeader>
<DialogTitle>AI Assistant</DialogTitle> <DialogTitle>AI Assistant</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -167,7 +167,7 @@ export const DuplicateProject = ({
<div className="grid gap-2"> <div className="grid gap-2">
<Label>Selected services to duplicate</Label> <Label>Selected services to duplicate</Label>
<div className="space-y-2 max-h-[200px] overflow-y-auto border rounded-md p-4"> <div className="space-y-2 max-h-[200px] border rounded-md p-4">
{selectedServices.map((service) => ( {selectedServices.map((service) => (
<div key={service.id} className="flex items-center space-x-2"> <div key={service.id} className="flex items-center space-x-2">
<span className="text-sm"> <span className="text-sm">

View File

@@ -94,7 +94,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
</DropdownMenuItem> </DropdownMenuItem>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl"> <DialogContent className="sm:max-w-6xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Project Environment</DialogTitle> <DialogTitle>Project Environment</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -157,7 +157,7 @@ export const ShowProjects = () => {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]" className="w-[200px] space-y-2 max-h-[400px]"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{project.applications.length > 0 && ( {project.applications.length > 0 && (
@@ -265,7 +265,7 @@ export const ShowProjects = () => {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]" className="w-[200px] space-y-2 max-h-[280px]"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">