mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-06-19 06:05:25 +02:00
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:
@@ -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>
|
||||
|
||||
@@ -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 🎉
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user