From 2d22800a3d1bb8d59918e94de954e9c474175c4b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 10 Feb 2024 10:28:23 -0600
Subject: [PATCH] Set aspect ratios on live display (#9780)

* set aspect ratios on live display

* try 8/9
---
 web/src/components/Sidebar.tsx | 4 ++--
 web/src/pages/Live.tsx         | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index a855dbdc0..0a563cbce 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -74,8 +74,8 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
           className={({ isActive }) =>
             `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
               isActive
-                ? "font-bold text-white bg-primary"
-                : "text-muted-foreground bg-secondary"
+                ? "font-bold text-primary-foreground bg-primary"
+                : "text-muted-foreground bg-muted"
             }`
           }
         >
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index c50c0d4d2..2f4270bb1 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -78,10 +78,11 @@ function Live() {
       <div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
         {cameras.map((camera) => {
           let grow;
-          if (camera.detect.width / camera.detect.height > 2) {
-            grow = "aspect-wide md:col-span-2";
-          } else if (camera.detect.width / camera.detect.height < 1) {
-            grow = "aspect-tall md:aspect-auto md:row-span-2";
+          let aspectRatio = camera.detect.width / camera.detect.height;
+          if (aspectRatio > 2) {
+            grow = "md:col-span-2 aspect-wide";
+          } else if (aspectRatio < 1) {
+            grow = `md:row-span-2 aspect-[8/9]`;
           } else {
             grow = "aspect-video";
           }