Frontend

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -57,6 +57,7 @@ function ScriptItem({
     const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
     const version = defaultInstallMethod?.resources?.version || "";
 
+    const [linksVisible, setLinksVisible] = useState<boolean>(false);
 
     return (
         <div className="mr-7 mt-0 flex w-full min-w-fit">
@@ -82,7 +83,7 @@ function ScriptItem({
                                     unoptimized
                                 />
                                 <div className="ml-4 flex flex-col justify-between">
-                                    <div className="flex h-full w-full flex-col justify-between">
+                                    <div className="flex h-full w-full flex-col mb-4">
                                         <div>
                                             <h1 className="text-lg font-semibold">
                                                 {item.name} {getDisplayValueFromType(item.type)}
@@ -126,10 +127,20 @@ function ScriptItem({
                             <div className="flex flex-col items-end gap-4 ml-auto">
                                 <DefaultSettings item={item} />
                                 <InterFaces item={item} />
-                                <Buttons item={item} />
+                                <div>
+                                    <>
+                                        <button
+                                            onClick={() => setLinksVisible(!linksVisible)}
+                                            className="flex items-right justify-right gap-1 mb-2 rounded-md border border-accent bg-accent/20 px-2 py-1 text-l hover:bg-accent w-30"
+                                        >
+                                            Show Links {linksVisible ? '▲' : '▼'}
+                                        </button>
+                                        {linksVisible && <Buttons item={item} />}
+                                    </>
                                 </div>
                             </div>
-                        <Separator className="mt-4" />
+                        </div>
+
                         <div>
                             <div className="mt-4">
                                 <Description item={item} />

frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx

@@ -72,6 +72,7 @@ export default function Buttons({ item }: { item: Script }) {
     ].filter(Boolean) as ButtonLinkProps[];
 
     return (
+
         <div className="flex flex-wrap justify-end gap-2">
             {buttons.map((props, index) => (
                 <ButtonLink key={index} {...props} />

frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx

@@ -30,9 +30,10 @@ export default function InterFaces({ item }: { item: Script }) {
         <div className="flex flex-col gap-2">
             {item.interface_port !== null ? (
                 <div className="flex items-center justify-end">
-          <h2 className="mr-2 text-end text-lg font-semibold">
+                    <h2 className="mr-2 text-end text-l font-semibold">
                         {"Default Interface:"}
                     </h2>{" "}
+
                     <CopyButton label="default interface" value={item.interface_port} />
                 </div>
             ) : null}