Cleans up the mobile styling. Adds tabs

src/routes/_app.tsx

@@ -11,7 +11,7 @@ export const Route = createFileRoute("/_app")({
 function AppHeader() {
   const { user, logout, isLoading } = useAuth();
   return (
-    <header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
+    <header className="flex flex-wrap items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
       <h1 className="text-2xl font-bold text-slate-100 m-0">
         DM's Table Companion
       </h1>

src/routes/_app/_authenticated/document.$documentId.tsx

@@ -9,6 +9,8 @@ import {
 } from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { EditSessionForm } from "@/components/documents/session/EditSessionForm";
+import { displayName } from "@/lib/relationships";
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/react";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -47,8 +49,17 @@ function RouteComponent() {
 
   console.log("Parsed data: ", relationships);
 
+  const relationshipList = [
+    RelationshipType.Scenes,
+    RelationshipType.Secrets,
+    RelationshipType.Locations,
+    RelationshipType.Npcs,
+    RelationshipType.Monsters,
+    RelationshipType.Treasures,
+  ];
+
   return (
-    <div className="max-w-xl mx-auto py-8">
+    <div className="max-w-xl mx-auto py-2 px-4">
       <Link
         to="/document/$documentId/print"
         params={{ documentId: session.id }}
@@ -60,21 +71,27 @@ function RouteComponent() {
         session={session as Session}
         onSubmit={handleSaveSession}
       />
-      {[
-        RelationshipType.Scenes,
-        RelationshipType.Secrets,
-        RelationshipType.Locations,
-        RelationshipType.Npcs,
-        RelationshipType.Monsters,
-        RelationshipType.Treasures,
-      ].map((relationshipType) => (
-        <RelationshipList
-          key={relationshipType}
-          root={session}
-          relationshipType={relationshipType}
-          items={relationships[relationshipType] ?? []}
-        />
-      ))}
+      <TabGroup>
+        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
+          {relationshipList.map((relationshipType) => (
+            <Tab className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700">
+              {displayName(relationshipType)}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {relationshipList.map((relationshipType) => (
+            <TabPanel>
+              <RelationshipList
+                key={relationshipType}
+                root={session}
+                relationshipType={relationshipType}
+                items={relationships[relationshipType] ?? []}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </TabGroup>
     </div>
   );
 }