From 10408f604ac41ced4ac61a74058a4dcba7460b9a Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Thu, 27 Jun 2024 15:35:48 +0200
Subject: [PATCH] fix layout for smaller (laptop) screens

---
 package-lock.json    |   4 -
 src/app/layout.tsx   |  10 +-
 src/app/tailwind.css | 259 +++----------------------------------------
 3 files changed, 22 insertions(+), 251 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2320c1d..f3832ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4667,10 +4667,6 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
-    "node_modules/eslint-plugin-import": {
-      "dev": true,
-      "peer": true
-    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff59179..5ecde36 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -31,15 +31,15 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
-            <div className="grid grid-cols-12 w-5/6">
-              <div id="sidebar" className="col-start-1 col-end-3 h-5/6 flex flex-col"> <header className="">
-                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6">SubMan</h1>
-                <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
+            <div className="w-5/6 flex">
+              <div id="sidebar" className="h-5/6 flex flex-col"> <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">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
               </header>
                 <Navlinks className="mt-6" />
                 <footer className="mt-auto"><ModeToggle /></footer>
               </div>
-              <div className="col-start-3 col-span-full">
+              <div className="flex justify-center w-full">
                 {children}
               </div>
             </div>
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 176c7c1..891070a 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -446,60 +446,6 @@ video {
   display: none;
 }
 
-:root {
-  --background: 220 0% 96%;
-  --foreground: 222.2 84% 4.9%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --primary: 144.91 90% 32%;
-  --primary-foreground: 75 10% 97.84%;
-  --secondary: 240 0% 100%;
-  --secondary-foreground: 150 95% 30%;
-  --accent: 150 55% 95%;
-  --accent-foreground: 155 100% 20%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 0% 100%;
-  --ring: 150 100% 40%;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --background: 222.2 40% 4%;
-  --foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --popover: 230 25% 10%;
-  --popover-foreground: 210 40% 98%;
-  --card: 222.2 20% 6%;
-  --card-foreground: 210 40% 98%;
-  --border: 217.2 20% 10%;
-  --input: 217.2 32.6% 17.5%;
-  --primary: 155 70% 35%;
-  --primary-foreground: 80 10% 97.84%;
-  --secondary: 200 50% 98%;
-  --secondary-foreground: 155 85% 30%;
-  --accent: 170 60% 10%;
-  --accent-foreground: 155 60% 65%;
-  --destructive: 5 90% 65%;
-  --destructive-foreground: 0 100% 10%;
-  --ring: 160 90% 45%;
-}
-
-* {
-  border-color: hsl(var(--border));
-}
-
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -971,6 +917,14 @@ body {
   width: 100vw;
 }
 
+.w-36 {
+  width: 9rem;
+}
+
+.w-40 {
+  width: 10rem;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -984,6 +938,11 @@ body {
   min-width: fit-content;
 }
 
+.min-w-min {
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1439,6 +1398,10 @@ body {
   padding-top: 0.25rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1701,194 +1664,6 @@ body {
   animation-duration: 200ms;
 }
 
-/**/
-
-/* @layer base { */
-
-/*   :root { */
-
-/*     --background: 43 62% 98%; */
-
-/*     --foreground: 43 73% 2%; */
-
-/*     --muted: 43 24% 85%; */
-
-/*     --muted-foreground: 43 10% 37%; */
-
-/*     --popover: 43 62% 98%; */
-
-/*     --popover-foreground: 43 73% 2%; */
-
-/*     --card: 43 62% 98%; */
-
-/*     --card-foreground: 43 73% 2%; */
-
-/*     --border: 43 15% 91%; */
-
-/*     --input: 43 15% 91%; */
-
-/*     --primary: 43 50% 69%; */
-
-/*     --primary-foreground: 43 50% 9%; */
-
-/*     --secondary: 43 6% 92%; */
-
-/*     --secondary-foreground: 43 6% 32%; */
-
-/*     --accent: 43 13% 83%; */
-
-/*     --accent-foreground: 43 13% 23%; */
-
-/*     --destructive: 8 84% 20%; */
-
-/*     --destructive-foreground: 8 84% 80%; */
-
-/*     --ring: 43 50% 69%; */
-
-/*     --radius: 0.5rem; */
-
-/*   } */
-
-/**/
-
-/*   .dark { */
-
-/*     --background: 43 48% 4%; */
-
-/*     --foreground: 43 26% 97%; */
-
-/*     --muted: 43 24% 15%; */
-
-/*     --muted-foreground: 43 10% 63%; */
-
-/*     --popover: 43 48% 4%; */
-
-/*     --popover-foreground: 43 26% 97%; */
-
-/*     --card: 43 48% 4%; */
-
-/*     --card-foreground: 43 26% 97%; */
-
-/*     --border: 43 15% 13%; */
-
-/*     --input: 43 15% 13%; */
-
-/*     --primary: 43 50% 69%; */
-
-/*     --primary-foreground: 43 50% 9%; */
-
-/*     --secondary: 43 8% 18%; */
-
-/*     --secondary-foreground: 43 8% 78%; */
-
-/*     --accent: 43 14% 23%; */
-
-/*     --accent-foreground: 43 14% 83%; */
-
-/*     --destructive: 8 84% 52%; */
-
-/*     --destructive-foreground: 0 0% 100%; */
-
-/*     --ring: 43 50% 69%; */
-
-/*   } */
-
-/* } */
-
-/**/
-
-/* @layer base { */
-
-/*   :root { */
-
-/*     --background: 258 70% 100%; */
-
-/*     --foreground: 258 77% 0%; */
-
-/*     --muted: 258 29% 85%; */
-
-/*     --muted-foreground: 258 10% 40%; */
-
-/*     --popover: 258 70% 100%; */
-
-/*     --popover-foreground: 258 77% 0%; */
-
-/*     --card: 258 70% 100%; */
-
-/*     --card-foreground: 258 77% 0%; */
-
-/*     --border: 220 13% 91%; */
-
-/*     --input: 220 13% 91%; */
-
-/*     --primary: 258 58% 37%; */
-
-/*     --primary-foreground: 258 58% 97%; */
-
-/*     --secondary: 258 19% 81%; */
-
-/*     --secondary-foreground: 258 19% 21%; */
-
-/*     --accent: 258 19% 81%; */
-
-/*     --accent-foreground: 258 19% 21%; */
-
-/*     --destructive: 19 98% 27%; */
-
-/*     --destructive-foreground: 19 98% 87%; */
-
-/*     --ring: 258 58% 37%; */
-
-/*     --radius: 0.5rem; */
-
-/*   } */
-
-/**/
-
-/*   .dark { */
-
-/*     --background: 258 53% 3%; */
-
-/*     --foreground: 258 40% 97%; */
-
-/*     --muted: 258 29% 15%; */
-
-/*     --muted-foreground: 258 10% 60%; */
-
-/*     --popover: 258 53% 3%; */
-
-/*     --popover-foreground: 258 40% 97%; */
-
-/*     --card: 258 53% 3%; */
-
-/*     --card-foreground: 258 40% 97%; */
-
-/*     --border: 215 27.9% 16.9%; */
-
-/*     --input: 215 27.9% 16.9%; */
-
-/*     --primary: 258 58% 37%; */
-
-/*     --primary-foreground: 258 58% 97%; */
-
-/*     --secondary: 258 15% 10%; */
-
-/*     --secondary-foreground: 258 15% 70%; */
-
-/*     --accent: 258 15% 10%; */
-
-/*     --accent-foreground: 258 15% 70%; */
-
-/*     --destructive: 19 98% 46%; */
-
-/*     --destructive-foreground: 0 0% 100%; */
-
-/*     --ring: 258 58% 37%; */
-
-/*   } */
-
-/* } */
-
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }