From 69408257d23803ba3fd1c8fd4a153d7a1a34df9e Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Thu, 5 Mar 2026 18:55:03 -0500
Subject: [PATCH] fix: implement atomic deployment rollbacks and custom
 scrollbar UI

---
 CHANGELOG.md                             |  3 +++
 backend/src/index.ts                     | 10 ++++++++--
 frontend/src/components/AppStoreView.tsx |  2 +-
 frontend/src/index.css                   | 20 ++++++++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a48fb100..1426137c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Changed:** Rebranded "Templates" to "App Store" across the UI.
 - **Added:** Advanced deployment configuration panel (Editable Ports and Environment Variables) with smart defaults.
 - **Fixed:** Implemented smart image fallbacks for broken registry logos and added expandable descriptions.
+- **Added:** Atomic Deployments: Failed App Store deployments now automatically roll back and delete their orphaned folders.
+- **Fixed:** Global dark mode scrollbar styling to eliminate blinding white native scrollbars.
+- **Fixed:** Input overlap UI bug in the App Store deployment panel.
 ### Added
 - **Added:** Official LinuxServer.io API integration as the default Template Registry.
 - **Added:** Rich metadata display in the App Store (Architectures, Documentation links, GitHub repository links).
diff --git a/backend/src/index.ts b/backend/src/index.ts
index faaef917..12668727 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -1083,8 +1083,14 @@ app.post('/api/templates/deploy', async (req: Request, res: Response) => {
       await fsPromises.writeFile(defaultEnvPath, envString, 'utf-8');
     }
 
-    // 4. Deploy the stack
-    await composeService.deployStack(stackName, terminalWs || undefined);
+    // 4. Deploy the stack with atomic rollback
+    try {
+      await composeService.deployStack(stackName, terminalWs || undefined);
+    } catch (deployError) {
+      // ATOMIC ROLLBACK: If Docker fails, delete the folder we just created
+      await fileSystemService.deleteStack(stackName);
+      throw deployError; // Pass error to outer catch block
+    }
 
     res.json({ success: true, message: 'Template deployed successfully' });
   } catch (error: any) {
diff --git a/frontend/src/components/AppStoreView.tsx b/frontend/src/components/AppStoreView.tsx
index 4ab9ac4a..c08c96f0 100644
--- a/frontend/src/components/AppStoreView.tsx
+++ b/frontend/src/components/AppStoreView.tsx
@@ -276,7 +276,7 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
                                 </div>
                             </SheetHeader>
 
-                            <ScrollArea className="flex-1 pr-4 mt-4 h-[calc(100vh-16rem)]">
+                            <ScrollArea className="flex-1 pr-4">
                                 <div className="space-y-6 pb-8">
                                     <div className="space-y-2">
                                         <Label htmlFor="stackName" className="font-semibold">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3157c4fe..cca26db8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -166,6 +166,10 @@
 }
 
 @layer base {
+  :root {
+    color-scheme: dark;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }
@@ -175,6 +179,22 @@
   }
 }
 
+/* Custom Dark Mode Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted) / 0.8);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
 html,
 body,
 #root {