add more responsiveness

src/@/components/ui/table.tsx

@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-2 md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))

src/app/layout.tsx

@@ -31,9 +31,9 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
-            <div className="w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
+          <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
+            <div className="w-full md:w-5/6 flex flex-col md:flex-row">
+              <div id="sidebar" className="h-5/6 flex flex-row md:flex-col justify-between"> <header className="">
                 <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
                 <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>

src/app/publication/columns.tsx

@@ -1,8 +1,7 @@
 "use client"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
 import { PubsWithGenres } from "./page"
 import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
@@ -23,7 +22,10 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Title
+          <span className="hidden sm:block">
+            Title
+          </span>
+          <span className="block sm:hidden"><BookType /></span>
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
@@ -34,12 +36,23 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
 
   {
     accessorKey: "link",
-    header: "Link",
+    header: () => (
+      <div className="mx-auto w-fit">
+        <span className="hidden sm:block">Link</span>
+        <span className="block sm:hidden"><SquareArrowOutUpRight /></span>
+      </div>
+    ),
     cell: TextInputCell,
     meta: { formSchema: pubSchema }
   },
 
   columnHelper.accessor("genres", {
+    header: () => (
+      <div className="w-fit mx-auto">
+        <span className="hidden sm:block">Genres</span>
+        <span className="sm:hidden"><Drama /></span>
+      </div>
+    ),
     cell: GenrePickerInputCell,
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
@@ -47,7 +60,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
 
   {
     accessorKey: "query_after_days",
-    header: "Query After (days)",
+    header: () => (
+      <div>
+        <span className="hidden sm:block">Query After (days)</span>
+        <span className="sm:hidden"><Clock /></span>
+      </div>
+    ),
     cell: NumberInputCell,
     meta: {
       step: 10,

src/app/publication/page.tsx

@@ -12,7 +12,7 @@ export default async function Page() {
   const genres = await getGenres()
   const pubs = await getPubsWithGenres()
   return (
-    <div className="container mx-auto">
+    <div className="container px-0 md:px-4 mx-auto">
       <DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
         <CreatePubDialog genres={genres} />
       </DataTable>

src/app/story/columns.tsx

@@ -3,7 +3,6 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
 import { ArrowUpDown, BookType, Drama, Tally5 } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import GenreBadges from "app/ui/genreBadges"
 import { selectCol } from "app/ui/tables/selectColumn"
 import NumberInputCell from "app/ui/tables/inputs/numberInput"
 import { storySchema } from "app/ui/forms/schemas"
@@ -25,7 +24,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
           <span className="hidden sm:block">
             Title
           </span>
-          <span className="display-block sm:hidden"><BookType /></span>
+          <span className="block sm:hidden"><BookType /></span>
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )

src/app/story/create.tsx

@@ -14,8 +14,8 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
     <Dialog>
       <DialogTrigger asChild>
         <div>
-          <Button className="hidden md:display-block">Create new story</Button>
-          <Button className="display-block md:hidden"><Plus /> </Button>
+          <Button className="hidden md:block">Create new story</Button>
+          <Button className="block md:hidden"><Plus /> </Button>
         </div>
       </DialogTrigger>
       <DialogContent>

src/app/story/page.tsx

@@ -19,7 +19,7 @@ export default async function Page() {
 
 
   return (
-    <div className="container px-1 mx-auto">
+    <div className="container px-0 md:px-4 mx-auto">
       <DataTable columns={columns} data={storiesWithGenres} tableName="story"
         genres={genres}
       >

src/app/tailwind.css

@@ -1093,6 +1093,10 @@ body {
   align-content: center;
 }
 
+.content-between {
+  align-content: space-between;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1105,6 +1109,10 @@ body {
   align-items: baseline;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1117,6 +1125,10 @@ body {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .justify-evenly {
   justify-content: space-evenly;
 }
@@ -1218,6 +1230,10 @@ body {
   overflow: hidden;
 }
 
+.overflow-clip {
+  overflow: clip;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1337,6 +1353,11 @@ body {
   background-color: transparent;
 }
 
+.bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1429,6 +1450,11 @@ body {
   padding-right: 0.25rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1719,6 +1745,10 @@ body {
   animation-duration: 200ms;
 }
 
+.direction-reverse {
+  animation-direction: reverse;
+}
+
 /**/
 
 /* @layer base { */

src/app/ui/titleContainer.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 
-export default function itleContainer({ children }: ComponentProps<"div">) {
+export default function TitleContainer({ children }: ComponentProps<"div">) {
   let classes = "w-full text-left m-auto"
   if (children == "RECORD DELETED") {
     classes = classes + " text-destructive font-bold"