From ef9ec6069f3cf37946f2a4403b3fb724bd953e6a Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:49:03 +0100
Subject: [PATCH] fix: improve App Config slide-in panel layout

- Narrowed panel from 640px to 520px so main table columns stay visible
- Settings grid uses CSS grid (3 columns) for proper wrapping
- Removed unused PanelActions component that caused white footer bar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Admin/AppConfigPage.module.css |  8 ++++----
 ui/src/pages/Admin/AppConfigPage.tsx        | 13 -------------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/ui/src/pages/Admin/AppConfigPage.module.css b/ui/src/pages/Admin/AppConfigPage.module.css
index e5833cf9..e16a5e76 100644
--- a/ui/src/pages/Admin/AppConfigPage.module.css
+++ b/ui/src/pages/Admin/AppConfigPage.module.css
@@ -1,5 +1,5 @@
 .widePanel {
-  width: 640px !important;
+  width: 520px !important;
 }
 
 .panelSection {
@@ -16,9 +16,9 @@
 }
 
 .settingsGrid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
 }
 
 .field {
diff --git a/ui/src/pages/Admin/AppConfigPage.tsx b/ui/src/pages/Admin/AppConfigPage.tsx
index f61267c0..88e5eda0 100644
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -284,22 +284,9 @@ export default function AppConfigPage() {
         onClose={() => setSelectedApp(null)}
         title={selectedApp ?? ''}
         className={styles.widePanel}
-        actions={selectedApp ? <PanelActions appId={selectedApp} onClose={() => setSelectedApp(null)} /> : undefined}
       >
         {selectedApp && <AppConfigDetail appId={selectedApp} onClose={() => setSelectedApp(null)} />}
       </DetailPanel>
     </div>
   );
 }
-
-function PanelActions({ appId, onClose }: { appId: string; onClose: () => void }) {
-  // Edit/Save/Cancel actions rendered in the panel footer
-  const { data: config } = useApplicationConfig(appId);
-  const updateConfig = useUpdateApplicationConfig();
-  const { toast } = useToast();
-  const [editing, setEditing] = useState(false);
-
-  // This is a simplified stub — the actual editing state is managed inside AppConfigDetail.
-  // For now, the actions slot is reserved for future use.
-  return null;
-}