From 0798a0c6c2108dcd1433fa92de5a8ff71bbd27b2 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Thu, 13 Nov 2025 21:48:37 -0500
Subject: [PATCH] clean up info box

---
 src/components/InfoSection.tsx     |  8 +++++++-
 src/components/ResourceInfoBox.tsx | 26 +++++++++++++++-----------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/InfoSection.tsx b/src/components/InfoSection.tsx
index 41f5cd89..5959bfc3 100644
--- a/src/components/InfoSection.tsx
+++ b/src/components/InfoSection.tsx
@@ -50,5 +50,11 @@ export function InfoSectionContent({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={cn("break-words", className)}>{children}</div>;
+    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">
+                {children}
+            </div>
+        </div>
+    );
 }
diff --git a/src/components/ResourceInfoBox.tsx b/src/components/ResourceInfoBox.tsx
index 4d77a434..a75ca78c 100644
--- a/src/components/ResourceInfoBox.tsx
+++ b/src/components/ResourceInfoBox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ShieldCheck, ShieldOff } from "lucide-react";
+import { ShieldCheck, ShieldOff, Eye, EyeOff } from "lucide-react";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import CopyToClipboard from "@app/components/CopyToClipboard";
 import {
@@ -54,12 +54,12 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
                                         authInfo.whitelist ||
                                         authInfo.headerAuth ? (
                                         <div className="flex items-start space-x-2 text-green-500">
-                                            <ShieldCheck className="w-4 h-4 mt-0.5" />
+                                            <ShieldCheck className="w-4 h-4 mt-0.5 flex-shrink-0" />
                                             <span>{t("protected")}</span>
                                         </div>
                                     ) : (
                                         <div className="flex items-center space-x-2 text-yellow-500">
-                                            <ShieldOff className="w-4 h-4" />
+                                            <ShieldOff className="w-4 h-4 flex-shrink-0" />
                                             <span>{t("notProtected")}</span>
                                         </div>
                                     )}
@@ -100,9 +100,7 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
                                     {t("protocol")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
-                                    <span>
-                                        {resource.protocol.toUpperCase()}
-                                    </span>
+                                    {resource.protocol.toUpperCase()}
                                 </InfoSectionContent>
                             </InfoSection>
                             <InfoSection>
@@ -164,11 +162,17 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
                     <InfoSection>
                         <InfoSectionTitle>{t("visibility")}</InfoSectionTitle>
                         <InfoSectionContent>
-                            <span>
-                                {resource.enabled
-                                    ? t("enabled")
-                                    : t("disabled")}
-                            </span>
+                            {resource.enabled ? (
+                                <div className="flex items-center space-x-2 text-green-500">
+                                    <Eye className="w-4 h-4 flex-shrink-0" />
+                                    <span>{t("enabled")}</span>
+                                </div>
+                            ) : (
+                                <div className="flex items-center space-x-2 text-neutral-500">
+                                    <EyeOff className="w-4 h-4 flex-shrink-0" />
+                                    <span>{t("disabled")}</span>
+                                </div>
+                            )}
                         </InfoSectionContent>
                     </InfoSection>
                 </InfoSections>