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

View File

@@ -142,7 +142,7 @@ export const AddApiKey = () => {
<DialogTrigger asChild>
<Button>Generate New Key</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-xl max-h-[90vh]">
<DialogHeader>
<DialogTitle>Generate API Key</DialogTitle>
<DialogDescription>

View File

@@ -41,7 +41,7 @@ export const ShowWelcomeDokploy = () => {
return (
<>
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-xl max-h-screen overflow-y-auto">
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle className="text-2xl font-semibold text-center">
Welcome to Dokploy Cloud 🎉

View File

@@ -106,7 +106,7 @@ export const AddCertificate = () => {
Add Certificate
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className=" sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Add New Certificate</DialogTitle>
<DialogDescription>

View File

@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
Add Node
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl">
<DialogContent className=" sm:max-w-4xl">
<DialogHeader>
<DialogTitle>Add Node</DialogTitle>
<DialogDescription className="flex flex-col gap-2">

View File

@@ -24,7 +24,7 @@ export const ShowNodeData = ({ data }: Props) => {
View Config
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
<DialogContent className={"sm:max-w-5xl"}>
<DialogHeader>
<DialogTitle>Node Config</DialogTitle>
<DialogDescription>

View File

@@ -20,7 +20,7 @@ export const ShowNodesModal = ({ serverId }: Props) => {
Show Swarm Nodes
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="min-w-[70vw] overflow-y-auto max-h-screen">
<DialogContent className="min-w-[70vw]">
<div className="grid w-full gap-1">
<ShowNodes serverId={serverId} />
</div>

View File

@@ -161,7 +161,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
</Button>
)}
</DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Add a external registry</DialogTitle>
<DialogDescription>

View File

@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
</Button>
)}
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className=" sm:max-w-2xl">
<DialogHeader>
<DialogTitle>
{destinationId ? "Update" : "Add"} Destination

View File

@@ -97,7 +97,7 @@ export const AddBitbucketProvider = () => {
<span>Bitbucket</span>
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-2xl ">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Bitbucket Provider <BitbucketIcon className="size-5" />

View File

@@ -105,7 +105,7 @@ export const EditBitbucketProvider = ({ bitbucketId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-2xl ">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Update Bitbucket <BitbucketIcon className="size-5" />

View File

@@ -143,7 +143,7 @@ export const AddGiteaProvider = () => {
<span>Gitea</span>
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Gitea Provider <GiteaIcon className="size-5" />

View File

@@ -92,7 +92,7 @@ export const EditGithubProvider = ({ githubId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-2xl ">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Update Github <GithubIcon className="size-5" />

View File

@@ -115,7 +115,7 @@ export const AddGitlabProvider = () => {
<span>GitLab</span>
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen ">
<DialogContent className="sm:max-w-2xl ">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
GitLab Provider <GitlabIcon className="size-5" />

View File

@@ -105,7 +105,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-2xl ">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Update GitLab <GitlabIcon className="size-5" />

View File

@@ -408,7 +408,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
</Button>
)}
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-3xl">
<DialogContent className=" sm:max-w-3xl">
<DialogHeader>
<DialogTitle>
{notificationId ? "Update" : "Add"} Notification

View File

@@ -186,7 +186,7 @@ export const Enable2FA = () => {
Enable 2FA
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>2FA Setup</DialogTitle>
<DialogDescription>

View File

@@ -26,7 +26,7 @@ export const ShowServerActions = ({ serverId }: Props) => {
View Actions
</DropdownMenuItem>
</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">
<DialogTitle className="text-xl">Web server settings</DialogTitle>
<DialogDescription>Reload or clean the web server.</DialogDescription>

View File

@@ -99,7 +99,7 @@ export const EditScript = ({ serverId }: Props) => {
<FileTerminal className="size-4 text-muted-foreground" />
</Button>
</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>
<DialogTitle>Modify Script</DialogTitle>
<DialogDescription>

View File

@@ -22,7 +22,7 @@ export const GPUSupportModal = () => {
<span>GPU Setup</span>
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen">
<DialogContent className="sm:max-w-4xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
Dokploy Server GPU Setup

View File

@@ -88,7 +88,7 @@ export const SetupServer = ({ serverId }: Props) => {
Setup Server
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen ">
<DialogContent className="sm:max-w-4xl ">
<DialogHeader>
<div className="flex flex-col gap-1.5">
<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>
</ul>
<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">
Copy Public Key ({server?.sshKey?.name})
<button

View File

@@ -20,7 +20,7 @@ export const ShowDockerContainersModal = ({ serverId }: Props) => {
Show Docker Containers
</DropdownMenuItem>
</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">
<ShowContainers serverId={serverId} />
</div>

View File

@@ -21,7 +21,7 @@ export const ShowMonitoringModal = ({ url, token }: Props) => {
Show Monitoring
</DropdownMenuItem>
</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">
<ShowPaidMonitoring BASE_URL={url} token={token} />
</div>

View File

@@ -20,7 +20,7 @@ export const ShowSchedulesModal = ({ serverId }: Props) => {
Show Schedules
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="sm:max-w-5xl overflow-y-auto max-h-screen ">
<DialogContent className="sm:max-w-5xl ">
<ShowSchedules id={serverId} scheduleType="server" />
</DialogContent>
</Dialog>

View File

@@ -20,7 +20,7 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
Show Swarm Overview
</DropdownMenuItem>
</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">
<SwarmMonitorCard serverId={serverId} />
</div>

View File

@@ -20,7 +20,7 @@ export const ShowTraefikFileSystemModal = ({ serverId }: Props) => {
Show Traefik File System
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="sm:max-w-7xl overflow-y-auto max-h-screen ">
<DialogContent className="sm:max-w-7xl ">
<ShowTraefikSystem serverId={serverId} />
</DialogContent>
</Dialog>

View File

@@ -117,7 +117,7 @@ export const CreateSSHKey = () => {
Option 2
</span>
<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">
Copy Public Key
<button

View File

@@ -60,7 +60,7 @@ export const WelcomeSuscription = () => {
return (
<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"}
<div className="flex justify-center items-center w-full">
{showConfetti && (

View File

@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
</Button>
)}
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className=" sm:max-w-2xl">
<DialogHeader>
<DialogTitle>SSH Key</DialogTitle>
<DialogDescription className="space-y-4">

View File

@@ -108,7 +108,7 @@ export const AddInvitation = () => {
<PlusIcon className="h-4 w-4" /> Add Invitation
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className=" sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Add Invitation</DialogTitle>
<DialogDescription>Invite a new user</DialogDescription>

View File

@@ -123,7 +123,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
Add Permissions
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-4xl">
<DialogContent className="max-h-[85vh] sm:max-w-4xl">
<DialogHeader>
<DialogTitle>Permissions</DialogTitle>
<DialogDescription>Add or remove permissions</DialogDescription>

View File

@@ -83,7 +83,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent
className="max-h-[85vh] overflow-y-auto sm:max-w-7xl"
className="max-h-[85vh] sm:max-w-7xl"
onEscapeKeyDown={(event) => event.preventDefault()}
>
<DialogHeader>

View File

@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
return (
<Dialog>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl">
<DialogContent className=" sm:max-w-4xl">
<DialogHeader>
<DialogTitle>Update Traefik Environment</DialogTitle>
<DialogDescription>

View File

@@ -67,7 +67,7 @@ export const ShowModalLogs = ({
return (
<Dialog>
<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>
<DialogTitle>View Logs</DialogTitle>
<DialogDescription>View the logs for {appName}</DialogDescription>

View File

@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
</DropdownMenuItem>
</DialogTrigger>
<DialogContent
className="max-h-screen overflow-y-auto sm:max-w-7xl"
className=" sm:max-w-7xl"
onEscapeKeyDown={(event) => event.preventDefault()}
>
<DialogHeader className="flex flex-col gap-1">