Fix layout

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 />} />

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>

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";
           }

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",