Add admin sidebar toggle on mobile, fix table wrapping, fix grids

src/components/admin/admin-sidebar-toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState, useEffect, type ReactNode } from "react";
+import { Menu, X } from "lucide-react";
+
+export function AdminSidebarToggle({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="lg:hidden flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-150 mr-2"
+        style={{ color: "var(--admin-text-muted)" }}
+        aria-label={open ? "Close sidebar" : "Open sidebar"}
+      >
+        {open ? <X size={18} /> : <Menu size={18} />}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-40 lg:hidden"
+          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      <div
+        className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!translate-x-0 lg:!relative lg:!inset-auto ${
+          open ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        {children}
+      </div>
+    </>
+  );
+}