Merge remote-tracking branch 'upstream/main'

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

@@ -56,7 +56,7 @@ export default function ScriptAccordion({
       value={expandedItem}
       onValueChange={handleAccordionChange}
       collapsible
-      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden mt-3 p-2"
+      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2"
     >
       {items.map((category) => (
         <AccordionItem

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

@@ -15,12 +15,12 @@ import { ResourceDisplay } from "./ResourceDisplay";
 import { getDisplayValueFromType } from "./ScriptInfoBlocks";
 import Alerts from "./ScriptItems/Alerts";
 import Buttons from "./ScriptItems/Buttons";
+import ConfigFile from "./ScriptItems/ConfigFile";
 import DefaultPassword from "./ScriptItems/DefaultPassword";
 import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
 import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
-import ConfigFile from "./ScriptItems/ConfigFile";
 
 interface ScriptItemProps {
   item: Script;
@@ -139,7 +139,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
   };
 
   return (
-    <div className="w-full max-w-5xl mx-auto">
+    <div className="w-full mx-auto">
       <div className="flex w-full flex-col">
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
@@ -151,7 +151,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
           </button>
         </div>
 
-        <div className="rounded-xl border border-border/40 bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
+        <div className="rounded-xl border border-border bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
           <div className="p-6 space-y-6">
             <Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
               <ScriptHeader item={item} />
@@ -171,16 +171,18 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
               <div className="">
                 <InstallCommand item={item} />
               </div>
-              <Separator />
-              <div className="flex gap-3 px-4 py-2 bg-accent/25">
-                <h2 className="text-lg font-semibold">
-                  Location of config file
-                </h2>
-              </div>
-              <Separator />
-              <div className="">
-                <ConfigFile item={item} />
-              </div>
+              {item.config_path && (
+                <>
+                  <Separator />
+                  <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                    <h2 className="text-lg font-semibold">Location of config file</h2>
+                  </div>
+                  <Separator />
+                  <div className="">
+                    <ConfigFile configPath={item.config_path} />
+                  </div>
+                </>
+              )}
             </div>
 
             <DefaultPassword item={item} />

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

@@ -1,10 +1,9 @@
 import ConfigCopyButton from "@/components/ui/config-copy-button";
-import { Script } from "@/lib/types";
 
-export default function ConfigFile({ item }: { item: Script }) {
+export default function ConfigFile({ configPath }: { configPath: string }) {
   return (
     <div className="px-4 pb-4">
-      <ConfigCopyButton>{item.config_path ? item.config_path : "No config path set"}</ConfigCopyButton>
+      <ConfigCopyButton>{configPath}</ConfigCopyButton>
     </div>
   );
 }

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

@@ -22,7 +22,7 @@ const Sidebar = ({
 	}, [] as Script[]);
 
 	return (
-		<div className="flex min-w-72 flex-col sm:max-w-72">
+		<div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
 			<div className="flex items-end justify-between pb-4">
 				<h1 className="text-xl font-bold">Categories</h1>
 				<p className="text-xs italic text-muted-foreground">
@@ -40,4 +40,4 @@ const Sidebar = ({
 	);
 };
 
-export default Sidebar;
+export default Sidebar;

frontend/src/app/scripts/page.tsx

@@ -47,7 +47,7 @@ function ScriptContent() {
             setSelectedScript={setSelectedScript}
           />
         </div>
-        <div className="mx-7 w-full sm:mx-0 sm:ml-7">
+        <div className="mx-4 w-full sm:mx-0 sm:ml-4">
           {selectedScript && item ? (
             <ScriptItem item={item} setSelectedScript={setSelectedScript} />
           ) : (