refactor: prevent API overflow in Settings component for better display

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>
           )}

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";