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/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;
 }
@@ -1429,6 +1441,11 @@ body {
   padding-right: 0.25rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1719,6 +1736,10 @@ body {
   animation-duration: 200ms;
 }
 
+.direction-reverse {
+  animation-direction: reverse;
+}
+
 /**/
 
 /* @layer base { */