added expand button

src/App.tsx

@@ -10,7 +10,7 @@ import Dialog from "./components/dialog";
 import Footer from "./components/footer";
 
 function App() {
-  const { db, tables, isLoading, loadDatabase } = useSQLiteStore();
+  const { db, tables, isLoading, loadDatabase, expandPage } = useSQLiteStore();
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [showDialog, setShowDialog] = useState(false);
   const [urlToFetch, setUrlToFetch] = useState<string | null>(null);
@@ -87,7 +87,9 @@ function App() {
   };
 
   return (
-    <>
+    <main
+      className={`mx-auto flex h-screen flex-col gap-3 p-4 ${expandPage ? "w-full" : "container"}`}
+    >
       {!db && <Logo />}
       <UploadFile />
       {renderContent()}
@@ -97,7 +99,7 @@ function App() {
         fn={handleRetryWithProxy}
       />
       {!db && <Footer />}
-    </>
+    </main>
   );
 }
 

src/components/export-buttons.tsx

@@ -45,7 +45,7 @@ export default function ExportButtons() {
           )}
           {renderExportButton(
             () => exportCustomQueryAsCSV(db, customQuery),
-            "Export custom query"
+            "Export custom query as CSV"
           )}
         </div>
       ),

src/components/settings.tsx

@@ -129,7 +129,7 @@ export default function Settings() {
             </div>
             <div>
               <p className="mb-1 text-sm text-muted-foreground">
-                Query History
+                Query History ({queryHestory.length})
               </p>
               <ScrollArea className="h-48 rounded-md border">
                 <div className="p-4">

src/components/table-select.tsx

@@ -12,9 +12,13 @@ import {
 } from "./ui/select";
 import { Badge } from "./ui/badge";
 import ExportButtons from "./export-buttons";
+import { Button } from "./ui/button";
+
+import { ExpandIcon } from "lucide-react";
 
 export default function TableSelect() {
-  const { tables, selectedTable, setSelectedTable } = useSQLiteStore();
+  const { tables, selectedTable, setSelectedTable, expandPage, setExpandPage } =
+    useSQLiteStore();
 
   const selectedTableCount = useMemo(() => {
     const index = parseInt(selectedTable);
@@ -32,7 +36,7 @@ export default function TableSelect() {
   );
 
   return (
-    <section className="flex items-center justify-center gap-2">
+    <section className="flex items-center justify-center gap-1">
       <Select value={selectedTable} onValueChange={setSelectedTable}>
         <SelectTrigger className="grow">
           <SelectValue placeholder="Select a table" />
@@ -51,6 +55,12 @@ export default function TableSelect() {
       >
         <span className="w-full text-center">{selectedTableCount}</span>
       </Badge>
+      <Button
+        className="hidden md:block"
+        onClick={() => setExpandPage(!expandPage)}
+      >
+        <ExpandIcon className="h-5 w-5" />
+      </Button>
       <ExportButtons />
     </section>
   );

src/main.tsx

@@ -8,9 +8,7 @@ import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <main className="container mx-auto flex h-screen flex-col gap-3 p-4">
-      <App />
-    </main>
+    <App />
     <Toaster />
   </React.StrictMode>
 );

src/store/useSQLiteStore.ts

@@ -26,6 +26,8 @@ interface SQLiteState {
   queryHestory: string[];
   setQueryHestory: (value: string[]) => void;
   appendToQueryHestory: (value: string) => void;
+  expandPage: boolean;
+  setExpandPage: (value: boolean) => void;
 }
 
 const initializeStore = create<SQLiteState>((set, get) => ({
@@ -96,7 +98,10 @@ const initializeStore = create<SQLiteState>((set, get) => ({
   queryHestory: [],
   setQueryHestory: (value: string[]) => set({ queryHestory: value }),
   appendToQueryHestory: (value: string) =>
-    set((state) => ({ queryHestory: [...state.queryHestory, value] }))
+    set((state) => ({ queryHestory: [...state.queryHestory, value] })),
+
+  expandPage: false,
+  setExpandPage: (value: boolean) => set({ expandPage: value })
 }));
 
 export default initializeStore;