From 04cd1a36e1c40b130b5e12836fb7697f384aa43b Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Mon, 6 Jan 2025 17:18:11 +0800
Subject: [PATCH] refactor: prevent API overflow in Settings component for
 better display

---
 src/components/Settings.tsx | 11 +++++++++--
 src/pages/App.tsx           | 32 --------------------------------
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 2e74fba..e5e0e5d 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -486,12 +486,19 @@ const APIShowBlock = (props: {
       <Badge variant="outline">{props.type}</Badge> <Label>{props.label}</Label>
       <div className="mt-4">
         <div className="grid w-full max-w-sm items-center gap-1.5 mt-2">
-          <Label>Endpoint</Label> {props.apiField}
+          <Label>Endpoint</Label>
+          <div className="w-72">
+            <pre className="text-xs whitespace-pre-wrap">{props.apiField}</pre>
+          </div>
         </div>
         <div className="grid w-full max-w-sm items-center gap-1.5 mt-2">
           <Label>Key</Label>
           {props.keyField ? (
-            props.keyField
+            <div className="w-72">
+              <pre className="text-xs whitespace-pre-wrap">
+                {props.keyField}
+              </pre>
+            </div>
           ) : (
             <span className="text-gray-500 italic">empty</span>
           )}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index b4e7d20..51e0cfc 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -80,39 +80,7 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-
 import { useToast } from "@/hooks/use-toast";
-import { Separator } from "@/components/ui/separator";
-import {
-  BoxesIcon,
-  ArrowUpDownIcon,
-  CircleDollarSignIcon,
-  ScissorsIcon,
-  WholeWordIcon,
-  EllipsisIcon,
-  CogIcon,
-  Menu,
-  ReceiptIcon,
-  WalletIcon,
-  RulerIcon,
-} from "lucide-react";
-import { Badge } from "@/components/ui/badge";
 import { ModeToggle } from "@/components/ModeToggle";
 
 import Navbar from "@/components/navbar";