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

src/app/admin/layout.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { getTranslations } from "next-intl/server";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
+import { AdminSidebarToggle } from "@/components/admin/admin-sidebar-toggle";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -164,7 +165,9 @@ export default async function AdminLayout({ children }: { children: ReactNode })
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
-      <Sidebar staff={staff} />
+      <AdminSidebarToggle>
+        <Sidebar staff={staff} />
+      </AdminSidebarToggle>
       <div className="flex flex-col min-w-0 p-5 lg:p-6">
         <Topbar staff={staff} />
         <section className="admin-page flex-1">{children}</section>
@@ -179,7 +182,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
   const navGroups = getNavGroups(t);
 
   return (
-    <aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
+    <aside className="h-full bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
       <div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
         <span
           className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"