From 3fb65e1987e4c18844a9e509479ee3fdbe5f635d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 8 Feb 2024 11:22:44 -0700
Subject: [PATCH] Fix layout

---
 web/src/App.tsx                |  5 ++++-
 web/src/pages/ConfigEditor.tsx |  2 +-
 web/src/pages/Live.tsx         |  4 ++--
 web/tailwind.config.js         | 22 +++++++++++++---------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 377d22493..8a22b0842 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -29,7 +29,10 @@ function App() {
           <Header onToggleNavbar={toggleNavbar} />
           <div className="grid grid-cols-[auto,1fr] flex-grow-1 overflow-auto">
             <Sidebar sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} />
-            <div id="pageRoot" className="overflow-x-hidden px-4 py-2 w-screen">
+            <div
+              id="pageRoot"
+              className="overflow-x-hidden px-4 py-2 w-screen md:w-full"
+            >
               <Routes>
                 <Route path="/" element={<Live />} />
                 <Route path="/history" element={<History />} />
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 7b35f3ed8..fe2922d5b 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -123,7 +123,7 @@ function ConfigEditor() {
   }
 
   return (
-    <div className="absolute top-28 bottom-16 right-0 left-0 md:left-24 lg:left-60">
+    <div className="absolute top-2 bottom-16 right-0 left-0 md:left-12">
       <div className="lg:flex justify-between mr-1">
         <Heading as="h2">Config</Heading>
         <div>
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 322a47e72..61977022a 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -76,9 +76,9 @@ function Live() {
         {cameras.map((camera) => {
           let grow;
           if (camera.detect.width / camera.detect.height > 2) {
-            grow = "h-26 md:h-auto md:col-span-2";
+            grow = "aspect-wide md:col-span-2";
           } else if (camera.detect.width / camera.detect.height < 1) {
-            grow = "md:row-span-2";
+            grow = "aspect-tall md:row-span-2";
           } else {
             grow = "aspect-video";
           }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1482770b2..bdf47d828 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -19,6 +19,19 @@ module.exports = {
       sans: ['"Inter"', "sans-serif"],
     },
     extend: {
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+      aspectRatio: {
+        "wide": "32 / 9",
+        "tall": "9 / 16",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -60,11 +73,6 @@ module.exports = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
@@ -75,10 +83,6 @@ module.exports = {
           to: { height: 0 },
         },
       },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
       screens: {
         xs: "480px",
         "2xl": "1440px",