From 9ce3335502167a461001fe4f3a520d67fd764619 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 16 May 2024 11:28:42 -0500
Subject: [PATCH 1/2] spacing on mobile landscape

---
 web/src/App.tsx                             |  8 +++++++-
 web/src/components/Wrapper.tsx              |  2 +-
 web/src/components/navigation/Bottombar.tsx | 20 ++++++++++++++++----
 web/src/pages/Exports.tsx                   |  2 +-
 web/src/views/events/EventView.tsx          |  2 +-
 web/src/views/live/LiveDashboardView.tsx    |  5 ++++-
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index eb81bc812..dfe3443ad 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -8,6 +8,7 @@ import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
 import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
+import { cn } from "./lib/utils";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -31,7 +32,12 @@ function App() {
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className={`absolute right-0 top-0 overflow-hidden ${isMobile ? "bottom-16 left-0" : "bottom-8 left-[52px]"}`}
+              className={cn(
+                "absolute right-0 top-0 overflow-hidden",
+                isMobile
+                  ? "bottom-12 left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16"
+                  : "bottom-8 left-[52px]",
+              )}
             >
               <Suspense>
                 <Routes>
diff --git a/web/src/components/Wrapper.tsx b/web/src/components/Wrapper.tsx
index 43c60cd60..4b1d38940 100644
--- a/web/src/components/Wrapper.tsx
+++ b/web/src/components/Wrapper.tsx
@@ -5,7 +5,7 @@ type TWrapperProps = {
 };
 
 const Wrapper = ({ children }: TWrapperProps) => {
-  return <main className="h-dvh w-screen overflow-hidden">{children}</main>;
+  return <main className="h-dvh w-full overflow-hidden">{children}</main>;
 };
 
 export default Wrapper;
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index dfa536f45..b61b92c92 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -15,12 +15,18 @@ import {
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
+import { isMobile } from "react-device-detect";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
 
   return (
-    <div className="absolute inset-x-4 bottom-0 flex h-16 flex-row items-center justify-between">
+    <div
+      className={cn(
+        "absolute inset-x-4 bottom-0 flex flex-row items-center justify-between",
+        isMobile ? "h-12 landscape:md:h-16" : "h-16",
+      )}
+    >
       {navItems.map((item) => (
         <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
       ))}
@@ -72,8 +78,10 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
 
   return (
     <Drawer>
-      <DrawerTrigger>
-        <IoIosWarning className="size-5 text-danger" />
+      <DrawerTrigger asChild>
+        <div className="p-2">
+          <IoIosWarning className="size-5 text-danger md:m-[6px]" />
+        </div>
       </DrawerTrigger>
       <DrawerContent
         className={cn(
@@ -95,7 +103,11 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
                 );
 
                 if (link) {
-                  return <Link to={link}>{message}</Link>;
+                  return (
+                    <Link key={id} to={link}>
+                      {message}
+                    </Link>
+                  );
                 } else {
                   return message;
                 }
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 4c58f0b09..c955041c0 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -77,7 +77,7 @@ function Exports() {
   const [selected, setSelected] = useState<Export>();
 
   return (
-    <div className="flex size-full flex-col gap-2 overflow-hidden p-2">
+    <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
       <AlertDialog
         open={deleteClip != undefined}
         onOpenChange={() => setDeleteClip(undefined)}
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index bdcbac88b..ad71ed30e 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -252,7 +252,7 @@ export default function EventView({
   }
 
   return (
-    <div className="flex size-full flex-col py-2">
+    <div className="flex size-full flex-col pt-2 md:py-2">
       <Toaster closeButton={true} />
       <div className="relative mb-2 flex h-11 items-center justify-between pl-3 pr-2">
         {isMobile && (
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 3f176444f..a2f371700 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -155,7 +155,10 @@ export default function LiveDashboardView({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   return (
-    <div className="size-full overflow-y-auto p-2" ref={containerRef}>
+    <div
+      className="size-full overflow-y-auto px-1 pt-2 md:p-2"
+      ref={containerRef}
+    >
       {isMobile && (
         <div className="relative flex h-11 items-center justify-between">
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />

From 410981c0d9163173de28bfda09dd98c70b10b2b6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 16 May 2024 16:32:45 -0500
Subject: [PATCH 2/2] better icon placement when running as pwa

---
 web/src/App.tsx                             | 8 +++++---
 web/src/components/navigation/Bottombar.tsx | 6 ++++--
 web/src/utils/isPWA.ts                      | 3 +++
 web/src/views/events/EventView.tsx          | 6 +++---
 web/src/views/live/LiveDashboardView.tsx    | 7 ++++++-
 5 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 web/src/utils/isPWA.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index dfe3443ad..d19680ed4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -9,6 +9,7 @@ import Bottombar from "./components/navigation/Bottombar";
 import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
+import { isPWA } from "./utils/isPWA";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -34,9 +35,10 @@ function App() {
               id="pageRoot"
               className={cn(
                 "absolute right-0 top-0 overflow-hidden",
-                isMobile
-                  ? "bottom-12 left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16"
-                  : "bottom-8 left-[52px]",
+                isMobile &&
+                  "bottom-12 left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16",
+                isMobile && isPWA && "bottom-16",
+                isDesktop && "bottom-8 left-[52px]",
               )}
             >
               <Suspense>
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index b61b92c92..fd4a3a743 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -16,6 +16,7 @@ import {
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";
+import { isPWA } from "@/utils/isPWA";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -23,8 +24,9 @@ function Bottombar() {
   return (
     <div
       className={cn(
-        "absolute inset-x-4 bottom-0 flex flex-row items-center justify-between",
-        isMobile ? "h-12 landscape:md:h-16" : "h-16",
+        "absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
+        isPWA ? "items-start pt-1" : "items-center",
+        isMobile && !isPWA && "h-12 landscape:md:h-16",
       )}
     >
       {navItems.map((item) => (
diff --git a/web/src/utils/isPWA.ts b/web/src/utils/isPWA.ts
new file mode 100644
index 000000000..8194e5835
--- /dev/null
+++ b/web/src/utils/isPWA.ts
@@ -0,0 +1,3 @@
+export const isPWA =
+  ("standalone" in window.navigator && window.navigator.standalone) ||
+  window.matchMedia("(display-mode: standalone)").matches;
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index ad71ed30e..6d84c7647 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -254,7 +254,7 @@ export default function EventView({
   return (
     <div className="flex size-full flex-col pt-2 md:py-2">
       <Toaster closeButton={true} />
-      <div className="relative mb-2 flex h-11 items-center justify-between pl-3 pr-2">
+      <div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
         )}
@@ -602,7 +602,7 @@ function DetectionReview({
         )}
 
         <div
-          className="mx-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4"
+          className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4"
           ref={contentRef}
         >
           {!loading && currentItems
@@ -922,7 +922,7 @@ function MotionReview({
       <div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
         <div
           ref={contentRef}
-          className="no-scrollbar mx-2 grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
+          className="no-scrollbar grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
         >
           {reviewCameras.map((camera) => {
             let grow;
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index a2f371700..5b96f9004 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -227,7 +227,12 @@ export default function LiveDashboardView({
 
       {!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
         <div
-          className={`mt-2 grid px-2 ${mobileLayout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
+          className={cn(
+            "mt-2 grid gap-2 px-2 md:gap-4",
+            mobileLayout == "grid" &&
+              "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4",
+            isMobile && "px-0",
+          )}
         >
           {includeBirdseye && birdseyeConfig?.enabled && (
             <BirdseyeLivePlayer