Refactor ScriptBrowser component for improved performance and readability

app/scripts/page.tsx

@@ -12,7 +12,9 @@ export default function Page() {
         quantity={100}
       />
       <div className="mt-20 flex">
-        <ScriptBrowser />
+        <div className="hidden sm:flex">
+          <ScriptBrowser />
+        </div>
         <div className="flex">
           <div className="h-screen w-full">
             <ScriptItem />

components/Navbar.tsx

@@ -57,7 +57,7 @@ function Navbar() {
               <SheetTrigger>
                 <Menu className="w-8 h-8" />
               </SheetTrigger>
-              <SheetContent side={"left"} className="w-full">
+              <SheetContent side={"left"}>
                 <SheetHeader>
                   <SheetTitle>Proxmox Helper Scripts</SheetTitle>
                   <SheetDescription>

components/ScriptBrowser.tsx

@@ -58,7 +58,7 @@ const ScriptBrowser = () => {
   }, [links, searchTerm]);
 
   return (
-    <div className="min-w-72 max-w-72 flex-col hidden sm:flex">
+    <div className="min-w-72 sm:max-w-72 flex-col flex">
       <h1 className="mb-5 text-xl font-bold">Scripts</h1>
       <Input
         className="mb-5"
@@ -72,7 +72,7 @@ const ScriptBrowser = () => {
           <AccordionItem
             key={category.id}
             value={category.Catagory_Title}
-            className={`text-md flex flex-col gap-2`}
+            className={`sm:text-md flex flex-col gap-2`}
           >
             <AccordionTrigger>{category.Catagory_Title}</AccordionTrigger>
             <AccordionContent>

components/ui/accordion.tsx

@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all py-1 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-hidden text-lg transition-all py-1 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>