From dd0dee620ad982e573d2765457aa1979ab4972c8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 16 May 2024 11:51:57 -0500
Subject: [PATCH] spacing on mobile landscape (#11397)

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