From 723885202d4280141dcb68a5ba025fea9254fd40 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Mon, 13 Jul 2026 06:33:01 +0800
Subject: [PATCH] fix(plugin): space-between layout, no-shrink dropdown,
 horizontal padding

---
 .../src/components/LibraryAppPanel.tsx        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/plugins/decky-vault/src/components/LibraryAppPanel.tsx b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
index 601a3a4..80a8df5 100644
--- a/plugins/decky-vault/src/components/LibraryAppPanel.tsx
+++ b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
@@ -110,12 +110,12 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
 
   return (
     <>
-      {/* Stats + device dropdown inline */}
+      {/* Stats + device dropdown — space-between, with padding */}
       <PanelSectionRow>
-        <div className={staticClasses.Text} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "2px 0", fontSize: "13px" }}>
-          <span style={{ flex: 1, textAlign: "center" }}>
+        <div className={staticClasses.Text} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", padding: "4px 16px", fontSize: "13px" }}>
+          <span style={{ flex: 1, textAlign: "left" }}>
             {data.estFps ? (
-              <span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px", justifyContent: "center" }}>
+              <span style={{ display: "inline-flex", flexWrap: "wrap", gap: "4px 8px" }}>
                 <span><strong>{data.estFps.avg}</strong> <span style={{ opacity: 0.4 }}>avg</span></span>
                 {data.estFps.onePct != null && <span><strong>{data.estFps.onePct}</strong> <span style={{ opacity: 0.4 }}>1% low</span></span>}
                 {data.estFps.low != null && <span><strong>{data.estFps.low}</strong> <span style={{ opacity: 0.4 }}>min</span></span>}
@@ -127,11 +127,13 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
               <span style={{ opacity: 0.4, fontSize: "12px" }}>No data yet</span>
             )}
           </span>
-          <DropdownItem
-            rgOptions={deviceOptions}
-            selectedOption={device}
-            onChange={(opt) => setDevice(opt.data as string)}
-          />
+          <span style={{ flexShrink: 0 }}>
+            <DropdownItem
+              rgOptions={deviceOptions}
+              selectedOption={device}
+              onChange={(opt) => setDevice(opt.data as string)}
+            />
+          </span>
         </div>
       </PanelSectionRow>