From 381b92d5e47280e5f25ba772ccad9922b070a097 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Wed, 17 Jun 2026 08:13:28 -0600
Subject: [PATCH] refactor: enhance UI components in HandleCertificate and
 SidebarLogo

- Updated the HandleCertificate component to improve dialog content height and textarea styling for better usability.
- Adjusted the SidebarLogo component layout to enhance alignment and spacing, ensuring a more consistent appearance across the sidebar.
- Implemented responsive design adjustments to textarea elements, preventing overflow and improving user experience.
---
 .../settings/certificates/handle-certificate.tsx |  6 +++---
 apps/dokploy/components/layouts/side.tsx         | 16 ++++++----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/certificates/handle-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/handle-certificate.tsx
index cbd306346..10abccc68 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/handle-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/handle-certificate.tsx
@@ -160,7 +160,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle>
 						{certificateId ? "Update" : "Add New"} Certificate
@@ -200,7 +200,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 									<FormLabel>Certificate Data</FormLabel>
 									<FormControl>
 										<Textarea
-											className="h-32"
+											className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
 											placeholder={certificateDataHolder}
 											{...field}
 										/>
@@ -217,7 +217,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 									<FormLabel>Private Key</FormLabel>
 									<FormControl>
 										<Textarea
-											className="h-32"
+											className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
 											placeholder={privateKeyDataHolder}
 											{...field}
 										/>
diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx
index 033bd04f5..30739e3fb 100644
--- a/apps/dokploy/components/layouts/side.tsx
+++ b/apps/dokploy/components/layouts/side.tsx
@@ -653,7 +653,7 @@ function SidebarLogo() {
 										const isDefault = org.members?.[0]?.isDefault ?? false;
 										return (
 											<div
-												className="flex flex-row justify-between"
+												className="flex flex-row items-center justify-between gap-1"
 												key={org.name}
 											>
 												<DropdownMenuItem
@@ -663,25 +663,21 @@ function SidebarLogo() {
 														});
 														window.location.reload();
 													}}
-													className="w-full gap-2 p-2"
+													className="flex min-w-0 flex-1 gap-2 p-2"
 												>
-													<div className="flex flex-col gap-1">
-														<div className="flex items-center gap-2">
-															{org.name}
-														</div>
-													</div>
-													<div className="flex size-6 items-center justify-center rounded-sm border">
+													<div className="flex size-6 shrink-0 items-center justify-center rounded-sm border">
 														<Logo
 															className={cn(
 																"transition-all",
-																state === "collapsed" ? "size-6" : "size-10",
+																state === "collapsed" ? "size-4" : "size-5",
 															)}
 															logoUrl={org.logo ?? undefined}
 														/>
 													</div>
+													<span className="truncate">{org.name}</span>
 												</DropdownMenuItem>
 
-												<div className="flex items-center gap-2">
+												<div className="flex shrink-0 items-center gap-2">
 													<Button
 														variant="ghost"
 														size="icon"