From 17d70f175d358e316d57b69d4fd4f7de8c1e59f1 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Mon, 13 Jul 2026 06:44:36 +0800
Subject: [PATCH] fix(plugin): use ButtonItem for gamepad-navigable View
 Details

---
 .../src/components/LibraryAppPanel.tsx        | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/plugins/decky-vault/src/components/LibraryAppPanel.tsx b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
index a06d889..1cc7e5b 100644
--- a/plugins/decky-vault/src/components/LibraryAppPanel.tsx
+++ b/plugins/decky-vault/src/components/LibraryAppPanel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from "react"
-import { PanelSectionRow, staticClasses } from "@decky/ui"
+import { PanelSectionRow, ButtonItem, staticClasses } from "@decky/ui"
 import { Router } from "@decky/ui"
 import {
   fetchPluginGame,
@@ -130,22 +130,12 @@ export default function LibraryAppPanel({ appId, title, hardwareSlug, baseUrl }:
             {detectedSlug ? detectedSlug : <span style={{ color: "#e0a030" }}>⚠ global</span>}
           </span>
         </span>
-        {/* View Details — compact inline button */}
-        <button
-          onClick={() => openExternalUrl(gameUrl)}
-          style={{
-            flexShrink: 0,
-            background: "rgba(255,255,255,0.08)",
-            border: "1px solid rgba(255,255,255,0.12)",
-            borderRadius: "6px",
-            color: "inherit",
-            fontSize: "12px",
-            padding: "4px 10px",
-            cursor: "pointer",
-          }}
-        >
-          View Details
-        </button>
+        {/* View Details — compact, gamepad-navigable */}
+        <span style={{ flexShrink: 0 }}>
+          <ButtonItem layout="below" onClick={() => openExternalUrl(gameUrl)}>
+            View Details
+          </ButtonItem>
+        </span>
       </div>
     </PanelSectionRow>
   )