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

Remove problematic CSS classes from system settings:
- Git provider configurations
- User management dialogs
- API key management
- Certificate management
- Notification settings
- Server management dialogs
- Profile and 2FA settings

Fixes render loops in admin panels.
This commit is contained in:
Jhon
2025-07-13 12:16:35 -03:00
parent d78974efc0
commit 2d382ea1be
34 changed files with 35 additions and 35 deletions
@@ -142,7 +142,7 @@ export const AddApiKey = () => {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button>Generate New Key</Button> <Button>Generate New Key</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto"> <DialogContent className="sm:max-w-xl max-h-[90vh]">
<DialogHeader> <DialogHeader>
<DialogTitle>Generate API Key</DialogTitle> <DialogTitle>Generate API Key</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -41,7 +41,7 @@ export const ShowWelcomeDokploy = () => {
return ( return (
<> <>
<Dialog open={open} onOpenChange={handleClose}> <Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-xl max-h-screen overflow-y-auto"> <DialogContent className="sm:max-w-xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl font-semibold text-center"> <DialogTitle className="text-2xl font-semibold text-center">
Welcome to Dokploy Cloud 🎉 Welcome to Dokploy Cloud 🎉
@@ -106,7 +106,7 @@ export const AddCertificate = () => {
Add Certificate Add Certificate
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl"> <DialogContent className=" sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Add New Certificate</DialogTitle> <DialogTitle>Add New Certificate</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
Add Node Add Node
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl"> <DialogContent className=" sm:max-w-4xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Add Node</DialogTitle> <DialogTitle>Add Node</DialogTitle>
<DialogDescription className="flex flex-col gap-2"> <DialogDescription className="flex flex-col gap-2">
@@ -24,7 +24,7 @@ export const ShowNodeData = ({ data }: Props) => {
View Config View Config
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}> <DialogContent className={"sm:max-w-5xl"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Node Config</DialogTitle> <DialogTitle>Node Config</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -20,7 +20,7 @@ export const ShowNodesModal = ({ serverId }: Props) => {
Show Swarm Nodes Show Swarm Nodes
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="min-w-[70vw] overflow-y-auto max-h-screen"> <DialogContent className="min-w-[70vw]">
<div className="grid w-full gap-1"> <div className="grid w-full gap-1">
<ShowNodes serverId={serverId} /> <ShowNodes serverId={serverId} />
</div> </div>
@@ -161,7 +161,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
</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>Add a external registry</DialogTitle> <DialogTitle>Add a external registry</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
</Button> </Button>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl"> <DialogContent className=" sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{destinationId ? "Update" : "Add"} Destination {destinationId ? "Update" : "Add"} Destination
@@ -97,7 +97,7 @@ export const AddBitbucketProvider = () => {
<span>Bitbucket</span> <span>Bitbucket</span>
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-2xl ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Bitbucket Provider <BitbucketIcon className="size-5" /> Bitbucket Provider <BitbucketIcon className="size-5" />
@@ -105,7 +105,7 @@ export const EditBitbucketProvider = ({ bitbucketId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" /> <PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-2xl ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Update Bitbucket <BitbucketIcon className="size-5" /> Update Bitbucket <BitbucketIcon className="size-5" />
@@ -143,7 +143,7 @@ export const AddGiteaProvider = () => {
<span>Gitea</span> <span>Gitea</span>
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Gitea Provider <GiteaIcon className="size-5" /> Gitea Provider <GiteaIcon className="size-5" />
@@ -92,7 +92,7 @@ export const EditGithubProvider = ({ githubId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" /> <PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-2xl ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Update Github <GithubIcon className="size-5" /> Update Github <GithubIcon className="size-5" />
@@ -115,7 +115,7 @@ export const AddGitlabProvider = () => {
<span>GitLab</span> <span>GitLab</span>
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-2xl ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
GitLab Provider <GitlabIcon className="size-5" /> GitLab Provider <GitlabIcon className="size-5" />
@@ -105,7 +105,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" /> <PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-2xl ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Update GitLab <GitlabIcon className="size-5" /> Update GitLab <GitlabIcon className="size-5" />
@@ -408,7 +408,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
</Button> </Button>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-3xl"> <DialogContent className=" sm:max-w-3xl">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{notificationId ? "Update" : "Add"} Notification {notificationId ? "Update" : "Add"} Notification
@@ -186,7 +186,7 @@ export const Enable2FA = () => {
Enable 2FA Enable 2FA
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl"> <DialogContent className="sm:max-w-xl">
<DialogHeader> <DialogHeader>
<DialogTitle>2FA Setup</DialogTitle> <DialogTitle>2FA Setup</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -26,7 +26,7 @@ export const ShowServerActions = ({ serverId }: Props) => {
View Actions View Actions
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-xl">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<DialogTitle className="text-xl">Web server settings</DialogTitle> <DialogTitle className="text-xl">Web server settings</DialogTitle>
<DialogDescription>Reload or clean the web server.</DialogDescription> <DialogDescription>Reload or clean the web server.</DialogDescription>
@@ -99,7 +99,7 @@ export const EditScript = ({ serverId }: Props) => {
<FileTerminal className="size-4 text-muted-foreground" /> <FileTerminal className="size-4 text-muted-foreground" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden"> <DialogContent className="sm:max-w-5xl overflow-x-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Modify Script</DialogTitle> <DialogTitle>Modify Script</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -22,7 +22,7 @@ export const GPUSupportModal = () => {
<span>GPU Setup</span> <span>GPU Setup</span>
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen"> <DialogContent className="sm:max-w-4xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
Dokploy Server GPU Setup Dokploy Server GPU Setup
@@ -88,7 +88,7 @@ export const SetupServer = ({ serverId }: Props) => {
Setup Server Setup Server
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-4xl ">
<DialogHeader> <DialogHeader>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
@@ -147,7 +147,7 @@ export const SetupServer = ({ serverId }: Props) => {
<li>2. Add The SSH Key to Server Manually</li> <li>2. Add The SSH Key to Server Manually</li>
</ul> </ul>
<div className="flex flex-col gap-4 w-full overflow-auto"> <div className="flex flex-col gap-4 w-full overflow-auto">
<div className="flex relative flex-col gap-2 overflow-y-auto"> <div className="flex relative flex-col gap-2">
<div className="text-sm text-primary flex flex-row gap-2 items-center"> <div className="text-sm text-primary flex flex-row gap-2 items-center">
Copy Public Key ({server?.sshKey?.name}) Copy Public Key ({server?.sshKey?.name})
<button <button
@@ -20,7 +20,7 @@ export const ShowDockerContainersModal = ({ serverId }: Props) => {
Show Docker Containers Show Docker Containers
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-7xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-7xl ">
<div className="grid w-full gap-1"> <div className="grid w-full gap-1">
<ShowContainers serverId={serverId} /> <ShowContainers serverId={serverId} />
</div> </div>
@@ -21,7 +21,7 @@ export const ShowMonitoringModal = ({ url, token }: Props) => {
Show Monitoring Show Monitoring
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-7xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-7xl ">
<div className="flex gap-4 py-4 w-full"> <div className="flex gap-4 py-4 w-full">
<ShowPaidMonitoring BASE_URL={url} token={token} /> <ShowPaidMonitoring BASE_URL={url} token={token} />
</div> </div>
@@ -20,7 +20,7 @@ export const ShowSchedulesModal = ({ serverId }: Props) => {
Show Schedules Show Schedules
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-5xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-5xl ">
<ShowSchedules id={serverId} scheduleType="server" /> <ShowSchedules id={serverId} scheduleType="server" />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -20,7 +20,7 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
Show Swarm Overview Show Swarm Overview
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-7xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-7xl ">
<div className="grid w-full gap-1"> <div className="grid w-full gap-1">
<SwarmMonitorCard serverId={serverId} /> <SwarmMonitorCard serverId={serverId} />
</div> </div>
@@ -20,7 +20,7 @@ export const ShowTraefikFileSystemModal = ({ serverId }: Props) => {
Show Traefik File System Show Traefik File System
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-7xl overflow-y-auto max-h-screen "> <DialogContent className="sm:max-w-7xl ">
<ShowTraefikSystem serverId={serverId} /> <ShowTraefikSystem serverId={serverId} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -117,7 +117,7 @@ export const CreateSSHKey = () => {
Option 2 Option 2
</span> </span>
<div className="flex flex-col gap-4 w-full overflow-auto"> <div className="flex flex-col gap-4 w-full overflow-auto">
<div className="flex relative flex-col gap-2 overflow-y-auto"> <div className="flex relative flex-col gap-2">
<div className="text-sm text-primary flex flex-row gap-2 items-center"> <div className="text-sm text-primary flex flex-row gap-2 items-center">
Copy Public Key Copy Public Key
<button <button
@@ -60,7 +60,7 @@ export const WelcomeSuscription = () => {
return ( return (
<Dialog open={isOpen}> <Dialog open={isOpen}>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl min-h-[75vh]"> <DialogContent className="sm:max-w-7xl min-h-[75vh]">
{showConfetti ?? "Flaso"} {showConfetti ?? "Flaso"}
<div className="flex justify-center items-center w-full"> <div className="flex justify-center items-center w-full">
{showConfetti && ( {showConfetti && (
@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
</Button> </Button>
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl"> <DialogContent className=" sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>SSH Key</DialogTitle> <DialogTitle>SSH Key</DialogTitle>
<DialogDescription className="space-y-4"> <DialogDescription className="space-y-4">
@@ -108,7 +108,7 @@ export const AddInvitation = () => {
<PlusIcon className="h-4 w-4" /> Add Invitation <PlusIcon className="h-4 w-4" /> Add Invitation
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl"> <DialogContent className=" sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Add Invitation</DialogTitle> <DialogTitle>Add Invitation</DialogTitle>
<DialogDescription>Invite a new user</DialogDescription> <DialogDescription>Invite a new user</DialogDescription>
@@ -123,7 +123,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
Add Permissions Add Permissions
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-4xl"> <DialogContent className="max-h-[85vh] sm:max-w-4xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Permissions</DialogTitle> <DialogTitle>Permissions</DialogTitle>
<DialogDescription>Add or remove permissions</DialogDescription> <DialogDescription>Add or remove permissions</DialogDescription>
@@ -83,7 +83,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}> <Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent <DialogContent
className="max-h-[85vh] overflow-y-auto sm:max-w-7xl" className="max-h-[85vh] sm:max-w-7xl"
onEscapeKeyDown={(event) => event.preventDefault()} onEscapeKeyDown={(event) => event.preventDefault()}
> >
<DialogHeader> <DialogHeader>
@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl"> <DialogContent className=" sm:max-w-4xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Update Traefik Environment</DialogTitle> <DialogTitle>Update Traefik Environment</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -67,7 +67,7 @@ export const ShowModalLogs = ({
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-7xl"> <DialogContent className="max-h-[85vh] sm:max-w-7xl">
<DialogHeader> <DialogHeader>
<DialogTitle>View Logs</DialogTitle> <DialogTitle>View Logs</DialogTitle>
<DialogDescription>View the logs for {appName}</DialogDescription> <DialogDescription>View the logs for {appName}</DialogDescription>
@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
</DropdownMenuItem> </DropdownMenuItem>
</DialogTrigger> </DialogTrigger>
<DialogContent <DialogContent
className="max-h-screen overflow-y-auto sm:max-w-7xl" className=" sm:max-w-7xl"
onEscapeKeyDown={(event) => event.preventDefault()} onEscapeKeyDown={(event) => event.preventDefault()}
> >
<DialogHeader className="flex flex-col gap-1"> <DialogHeader className="flex flex-col gap-1">