refactor: align secondary tabs with Decky UI

1 files changed, 21 insertions, 21 deletions

diff --git a/src/components/ConfigFileTab.tsx b/src/components/ConfigFileTab.tsx
index 60c5c7e..e3cc09d 100644
--- a/src/components/ConfigFileTab.tsx
+++ b/src/components/ConfigFileTab.tsx
@@ -1,19 +1,11 @@
 import { useEffect, useState } from "react";
-import { Field, Focusable, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
+import { Field, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
 import { getConfigFileContent, FileContentResult } from "../api/lsfgApi";
 import t from "../i18n/i18n";
 
 export function ConfigFileTab() {
   const [result, setResult] = useState<FileContentResult | null>(null);
 
-  const copy = async (content: string) => {
-    try {
-      await navigator.clipboard.writeText(content);
-    } catch {
-      // Clipboard access is unavailable in some Deck UI contexts.
-    }
-  };
-
   useEffect(() => {
     getConfigFileContent().then(setResult).catch((error) => {
       setResult({ success: false, error: String(error) });
@@ -23,24 +15,32 @@ export function ConfigFileTab() {
   if (!result) {
     return (
       <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
-        <PanelSectionRow><Spinner /></PanelSectionRow>
+        <PanelSectionRow>
+          <Spinner />
+        </PanelSectionRow>
       </PanelSection>
     );
   }
 
   return (
     <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
-      <PanelSectionRow>
-        <Field label={result.path || t("NERD_CONFIG_FILE", "Configuration File")} description={result.error || "Tap the file to copy it."}>
-          {result.success && result.content && (
-            <Focusable onActivate={() => void copy(result.content || "")}>
-              <pre style={{ maxHeight: "420px", overflow: "auto", whiteSpace: "pre-wrap", fontSize: "12px" }}>
-                {result.content}
-              </pre>
-            </Focusable>
-          )}
-        </Field>
-      </PanelSectionRow>
+      {result.error && (
+        <PanelSectionRow>
+          <Field label="Error" description={result.error} />
+        </PanelSectionRow>
+      )}
+      {result.success && result.content && (
+        <>
+          <PanelSectionRow>
+            <Field label="Config file" description={result.path} />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <pre style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
+              {result.content}
+            </pre>
+          </PanelSectionRow>
+        </>
+      )}
     </PanelSection>
   );
 }