From 91f1bae3e9996b91568611447b1d6d8ea52e561e Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Mon, 4 May 2026 14:51:17 -0700
Subject: [PATCH] fix alignement in info sections

---
 src/components/CertificateStatus.tsx | 15 ++++++++-------
 src/components/CopyToClipboard.tsx   |  2 +-
 src/components/InfoSection.tsx       | 23 ++++++++++++++++++-----
 src/components/ResourceInfoBox.tsx   | 14 ++++++++++----
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/CertificateStatus.tsx b/src/components/CertificateStatus.tsx
index cc22b1e88..788c39c21 100644
--- a/src/components/CertificateStatus.tsx
+++ b/src/components/CertificateStatus.tsx
@@ -31,8 +31,9 @@ export function CertificateStatusContent({
     const t = useTranslations();
 
     const labelClass =
-        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
-    const valueClass = "inline-flex items-center gap-2 text-sm leading-none";
+        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-normal";
+    const valueClass =
+        "inline-flex items-center gap-2 text-sm leading-normal";
 
     const handleRefresh = async () => {
         await refreshCert();
@@ -133,14 +134,14 @@ export function CertificateStatusContent({
             {isPending && !disableRestartButton ? (
                 <Button
                     variant="ghost"
-                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center"
+                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-normal inline-flex items-center self-center"
                     onClick={handleRefresh}
                     disabled={refreshing}
                     title={t("restartCertificate", {
                         defaultValue: "Restart Certificate"
                     })}
                 >
-                    <span className="inline-flex items-center gap-2 leading-none">
+                    <span className="inline-flex items-center gap-2 leading-normal">
                         <FileBadge
                             className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
                             aria-hidden
@@ -148,7 +149,7 @@ export function CertificateStatusContent({
                         {cert.status.charAt(0).toUpperCase() +
                             cert.status.slice(1)}
                         <RotateCw
-                            className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                            className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
                         />
                     </span>
                 </Button>
@@ -164,7 +165,7 @@ export function CertificateStatusContent({
                         <Button
                             size="icon"
                             variant="ghost"
-                            className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0"
+                            className="inline-flex h-4 w-4 min-h-0 shrink-0 items-center justify-center self-center p-0"
                             onClick={handleRefresh}
                             disabled={refreshing}
                             title={t("restartCertificate", {
@@ -172,7 +173,7 @@ export function CertificateStatusContent({
                             })}
                         >
                             <RotateCw
-                                className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                                className={`h-4 w-4 shrink-0 ${refreshing ? "animate-spin" : ""}`}
                             />
                         </Button>
                     ) : null}
diff --git a/src/components/CopyToClipboard.tsx b/src/components/CopyToClipboard.tsx
index dca14728c..7187694f7 100644
--- a/src/components/CopyToClipboard.tsx
+++ b/src/components/CopyToClipboard.tsx
@@ -33,7 +33,7 @@ const CopyToClipboard = ({
         <div className="flex items-center space-x-2 min-w-0 max-w-full">
             <button
                 type="button"
-                className="h-6 w-6 p-0 flex items-center justify-center cursor-pointer flex-shrink-0"
+                className="h-4 w-4 p-0 flex items-center justify-center cursor-pointer flex-shrink-0"
                 onClick={handleCopy}
             >
                 {!copied ? (
diff --git a/src/components/InfoSection.tsx b/src/components/InfoSection.tsx
index f680a51ca..0aa8aeda8 100644
--- a/src/components/InfoSection.tsx
+++ b/src/components/InfoSection.tsx
@@ -19,7 +19,7 @@ export function InfoSections({
     return (
         <div
             className={cn(
-                "grid grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
+                "grid w-full min-w-0 grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
                 columnSizing === "content" &&
                     "md:justify-items-start md:justify-start"
             )}
@@ -41,7 +41,11 @@ export function InfoSection({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("space-y-1", className)}>{children}</div>;
+    return (
+        <div className={cn("min-w-0 w-full max-w-full space-y-1", className)}>
+            {children}
+        </div>
+    );
 }
 
 export function InfoSectionTitle({
@@ -51,7 +55,11 @@ export function InfoSectionTitle({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("font-semibold", className)}>{children}</div>;
+    return (
+        <div className={cn("min-w-0 truncate font-semibold", className)}>
+            {children}
+        </div>
+    );
 }
 
 export function InfoSectionContent({
@@ -62,8 +70,13 @@ export function InfoSectionContent({
     className?: string;
 }) {
     return (
-        <div className={cn("min-w-0 overflow-hidden", className)}>
-            <div className="w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
+        <div
+            className={cn(
+                "w-full min-w-0 max-w-full overflow-hidden",
+                className
+            )}
+        >
+            <div className="w-full min-w-0 max-w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
                 {children}
             </div>
         </div>
diff --git a/src/components/ResourceInfoBox.tsx b/src/components/ResourceInfoBox.tsx
index 7ddb06ddd..b53558012 100644
--- a/src/components/ResourceInfoBox.tsx
+++ b/src/components/ResourceInfoBox.tsx
@@ -40,7 +40,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                     <InfoSection>
                         <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
                         <InfoSectionContent>
-                            {resource.niceId}
+                            <span className="inline-flex items-center">
+                                {resource.niceId}
+                            </span>
                         </InfoSectionContent>
                     </InfoSection>
                     {resource.http ? (
@@ -49,7 +51,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                 <InfoSectionTitle>URL</InfoSectionTitle>
                                 <InfoSectionContent>
                                     {resource.wildcard ? (
-                                        <span>{fullUrl}</span>
+                                        <span className="inline-flex items-center">
+                                            {fullUrl}
+                                        </span>
                                     ) : (
                                         <CopyToClipboard
                                             text={fullUrl}
@@ -68,7 +72,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     authInfo.sso ||
                                     authInfo.whitelist ||
                                     authInfo.headerAuth ? (
-                                        <div className="flex items-start space-x-2">
+                                        <div className="flex items-center space-x-2">
                                             <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
                                             <span>{t("protected")}</span>
                                         </div>
@@ -106,7 +110,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     {t("protocol")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
-                                    {resource.protocol.toUpperCase()}
+                                    <span className="inline-flex items-center">
+                                        {resource.protocol.toUpperCase()}
+                                    </span>
                                 </InfoSectionContent>
                             </InfoSection>
                             <InfoSection>