From 14f13f4ab9298f1f913dd8087c41ecebabd690d2 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 29 Mar 2024 12:08:42 -0600
Subject: [PATCH] Make padding consistent

---
 web/src/App.tsx                          |  2 +-
 web/src/pages/Logs.tsx                   |  2 +-
 web/src/views/events/EventView.tsx       |  4 ++--
 web/src/views/events/RecordingView.tsx   | 12 ++++++------
 web/src/views/live/LiveBirdseyeView.tsx  |  6 +++---
 web/src/views/live/LiveCameraView.tsx    |  4 ++--
 web/src/views/live/LiveDashboardView.tsx |  6 +++---
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index dc82bbc07..c50c53307 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -31,7 +31,7 @@ function App() {
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className={`absolute top-2 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-16 bottom-8"}`}
+              className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-12 bottom-8"}`}
             >
               <Suspense>
                 <Routes>
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 77b9f05f0..e8ca9002f 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -53,7 +53,7 @@ function Logs() {
   );
 
   return (
-    <div className="size-full flex flex-col pr-2">
+    <div className="size-full p-2 flex flex-col">
       <div className="flex justify-between items-center">
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-2xl"
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 3d6aa9f28..c965e54b7 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -205,7 +205,7 @@ export default function EventView({
   }
 
   return (
-    <div className="flex flex-col size-full">
+    <div className="py-2 flex flex-col size-full">
       <div className="h-11 px-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
@@ -492,7 +492,7 @@ function DetectionReview({
     <>
       <div
         ref={contentRef}
-        className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
+        className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
       >
         {filter?.before == undefined && (
           <NewReviewData
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index d3935cfca..f38b431e0 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -230,7 +230,7 @@ export function RecordingView({
       return "w-full aspect-wide";
     } else if (mainCameraAspect == "tall") {
       if (isDesktop) {
-        return "h-full aspect-tall flex flex-col justify-center";
+        return "size-full aspect-tall flex flex-col justify-center";
       } else {
         return "size-full";
       }
@@ -240,7 +240,7 @@ export function RecordingView({
   }, [mainCameraAspect]);
 
   return (
-    <div ref={contentRef} className="size-full flex flex-col">
+    <div ref={contentRef} className="size-full pt-2 flex flex-col">
       <Toaster />
       <div
         className={`w-full h-11 px-2 relative flex items-center justify-between`}
@@ -338,17 +338,17 @@ export function RecordingView({
       </div>
 
       <div
-        className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
+        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
       >
         <div className="flex flex-1 flex-wrap">
           <div
-            className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
+            className={`size-full flex px-4 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
           >
             <div
               key={mainCamera}
               className={
                 isDesktop
-                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}`
+                  ? `flex justify-center ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}`
                   : `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
               }
               style={{
@@ -491,7 +491,7 @@ function Timeline({
     <div
       className={`${
         isDesktop
-          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar`
+          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
           : "flex-grow overflow-hidden"
       } relative`}
     >
diff --git a/web/src/views/live/LiveBirdseyeView.tsx b/web/src/views/live/LiveBirdseyeView.tsx
index 58655e76c..0dff667da 100644
--- a/web/src/views/live/LiveBirdseyeView.tsx
+++ b/web/src/views/live/LiveBirdseyeView.tsx
@@ -116,7 +116,7 @@ export default function LiveBirdseyeView() {
         className={
           fullscreen
             ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
         }
       >
         <div
@@ -128,11 +128,11 @@ export default function LiveBirdseyeView() {
         >
           {!fullscreen ? (
             <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+              className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
               size={isMobile ? "icon" : "default"}
               onClick={() => navigate(-1)}
             >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+              <IoMdArrowBack className="size-5" />
               {isDesktop && "Back"}
             </Button>
           ) : (
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 5f01e2698..2ad61dc33 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -204,7 +204,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         className={
           fullscreen
             ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
         }
       >
         <div
@@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           )}
           <TooltipProvider>
             <div
-              className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+              className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
             >
               {!isIOS && (
                 <CameraFeatureToggle
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 83e998876..65e06d185 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -129,9 +129,9 @@ export default function LiveDashboardView({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   return (
-    <div className="size-full overflow-y-auto">
+    <div className="size-full p-2 overflow-y-auto">
       {isMobile && (
-        <div className="h-11 px-2 relative flex items-center justify-between">
+        <div className="h-11 relative flex items-center justify-between">
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
           <CameraGroupSelector />
           <div className="flex items-center gap-1">
@@ -164,7 +164,7 @@ export default function LiveDashboardView({
       {events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
-            <div className="flex gap-2 items-center">
+            <div className="px-1 flex gap-2 items-center">
               {events.map((event) => {
                 return <AnimatedEventCard key={event.id} event={event} />;
               })}