From ba03d3b3e43d544d2d30f65c2c50bbed626d031f Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 16 May 2024 17:00:14 -0500
Subject: [PATCH] Mobile/PWA spacing fixes (#11403)

* spacing on mobile landscape

* better icon placement when running as pwa

* better icon placement when running as pwa

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

diff --git a/web/src/App.tsx b/web/src/App.tsx
index dfe3443ad..c4bdab9f2 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"));
@@ -35,7 +36,7 @@ function App() {
               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-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
                   : "bottom-8 left-[52px]",
               )}
             >
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index b61b92c92..2f73a4f9e 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,11 @@ 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
+          ? "portrait:items-start portrait:pt-1 landscape:items-center"
+          : "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