Cleans up the mobile styling. Adds tabs

src/components/AutoSaveTextarea.tsx

@@ -63,7 +63,7 @@ export function AutoSaveTextarea({
         <textarea
           value={value}
           onChange={handleChange}
-          className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+          className={`w-full min-h-[6em] field-sizing-content p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
           {...props}
         />
       ) : (

src/components/DocumentList.tsx

@@ -40,11 +40,11 @@ export function DocumentList<T extends Document>({
 
   return (
     <section className="w-full max-w-2xl mx-auto">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between my-4">
         <h2 className="text-xl font-bold text-slate-100">{title}</h2>
         <button
           type="button"
-          className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-9 h-9 focus:outline-none focus:ring-2 focus:ring-violet-400"
+          className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-8 h-8 focus:outline-none focus:ring-2 focus:ring-violet-400"
           aria-label="Add new item"
           onClick={() => setOpen(true)}
         >

src/components/RelationshipList.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Loader } from "./Loader";
 import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 import { DocumentRow } from "./documents/DocumentRow";
+import { displayName } from "@/lib/relationships";
 
 interface RelationshipListProps {
   root: Document;
@@ -61,9 +62,7 @@ export function RelationshipList({
 
   return (
     <DocumentList
-      title={
-        relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1)
-      }
+      title={displayName(relationshipType)}
       items={items}
       error={error}
       renderRow={(document) => <DocumentRow document={document} />}

src/lib/relationships.ts

@@ -0,0 +1,5 @@
+import type { RelationshipType } from "./types";
+
+export function displayName(relationshipType: RelationshipType) {
+  return relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1);
+}

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) => (
+      <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>
   );
 }