From eb5c90393608d46e93464e8a3fb979d685070b59 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 10 Feb 2024 16:33:32 -0600
Subject: [PATCH] fix tooltips on mobile and make 2-row cameras full height

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

diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index a855dbdc0..ca9bdec6b 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -20,6 +20,7 @@ function Sidebar({
 }) {
   const sidebar = (
     <aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+      <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index c50c0d4d2..7e7d12642 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] md:h-full`;
           } else {
             grow = "aspect-video";
           }