From e6b21ee31a6bea38824b2352e3311ef84145244c Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Mon, 23 Sep 2024 17:55:39 +0200
Subject: [PATCH] add more responsiveness

---
 src/@/components/ui/table.tsx |  2 +-
 src/app/layout.tsx            |  6 +++---
 src/app/story/create.tsx      |  4 ++--
 src/app/story/page.tsx        |  2 +-
 src/app/tailwind.css          | 21 +++++++++++++++++++++
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/@/components/ui/table.tsx b/src/@/components/ui/table.tsx
index b4438a7..d42331f 100644
--- a/src/@/components/ui/table.tsx
+++ b/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}
   />
 ))
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8025da1..f3608f3 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/app/story/create.tsx b/src/app/story/create.tsx
index 0f76956..13baed7 100644
--- a/src/app/story/create.tsx
+++ b/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>
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
index 1d886d6..f5b81c6 100644
--- a/src/app/story/page.tsx
+++ b/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}
       >
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index ccf8ff4..055c056 100644
--- a/src/app/tailwind.css
+++ b/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 { */