UI Tweaks (#10727)

* Fix drawer not being scrollable

* Fix margin

* Use 2 columns for large mobile devices

* Move padding

* Add review summary to mobile calendar

* Make header spacing consistent between pages

* remove red

web/src/components/filter/ReviewFilterGroup.tsx

@@ -187,6 +187,7 @@ export default function ReviewFilterGroup({
         <MobileReviewSettingsDrawer
           features={mobileSettingsFeatures}
           filter={filter}
+          reviewSummary={reviewSummary}
           onUpdateFilter={onUpdateFilter}
           // not applicable as exports are not used
           camera=""
@@ -377,7 +378,7 @@ function ShowReviewFilter({
       </div>
 
       <Button
-        className="block md:hidden ml-1"
+        className="block md:hidden"
         size="sm"
         variant="secondary"
         onClick={() => setShowReviewed(showReviewed == 0 ? 1 : 0)}

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -27,19 +27,21 @@ export default function MobileCameraDrawer({
           <FaVideo className="text-muted-foreground" />
         </Button>
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] overflow-y-auto flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+      <DrawerContent className="max-h-[75dvh] px-4 mx-1 rounded-t-2xl overflow-hidden">
-        {allCameras.map((cam) => (
+        <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
-          <div
+          {allCameras.map((cam) => (
-            key={cam}
+            <div
-            className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
+              key={cam}
-            onClick={() => {
+              className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
-              onSelectCamera(cam);
+              onClick={() => {
-              setCameraDrawer(false);
+                onSelectCamera(cam);
-            }}
+                setCameraDrawer(false);
-          >
+              }}
-            {cam.replaceAll("_", " ")}
+            >
-          </div>
+              {cam.replaceAll("_", " ")}
-        ))}
+            </div>
+          ))}
+        </div>
       </DrawerContent>
     </Drawer>
   );

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -7,7 +7,7 @@ import { ExportContent } from "./ExportDialog";
 import { ExportMode } from "@/types/filter";
 import ReviewActivityCalendar from "./ReviewActivityCalendar";
 import { SelectSeparator } from "../ui/select";
-import { ReviewFilter } from "@/types/review";
+import { ReviewFilter, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import useSWR from "swr";
@@ -36,6 +36,7 @@ type MobileReviewSettingsDrawerProps = {
   currentTime: number;
   range?: TimeRange;
   mode: ExportMode;
+  reviewSummary?: ReviewSummary;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -48,6 +49,7 @@ export default function MobileReviewSettingsDrawer({
   currentTime,
   range,
   mode,
+  reviewSummary,
   onUpdateFilter,
   setRange,
   setMode,
@@ -201,6 +203,7 @@ export default function MobileReviewSettingsDrawer({
           </div>
         </div>
         <ReviewActivityCalendar
+          reviewSummary={reviewSummary}
           selectedDay={
             filter?.after == undefined
               ? undefined

web/src/views/events/EventView.tsx

@@ -206,9 +206,9 @@ export default function EventView({
 
   return (
     <div className="flex flex-col size-full">
-      <div className="h-10 relative flex justify-between items-center mx-2">
+      <div className="h-11 px-2 relative flex justify-between items-center">
         {isMobile && (
-          <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-2xl"
@@ -492,7 +492,7 @@ function DetectionReview({
     <>
       <div
         ref={contentRef}
-        className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
+        className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
       >
         {filter?.before == undefined && (
           <NewReviewData

web/src/views/events/RecordingView.tsx

@@ -225,13 +225,14 @@ export function RecordingView({
     <div ref={contentRef} className="size-full flex flex-col">
       <Toaster />
       <div
-        className={`w-full h-10 px-2 relative flex items-center justify-between`}
+        className={`w-full h-11 px-2 relative flex items-center justify-between`}
       >
         {isMobile && (
-          <Logo className="absolute top-1 inset-x-1/2 -translate-x-1/2 h-8" />
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
         <Button
           className="flex items-center gap-2 rounded-lg"
+          size="sm"
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
@@ -482,7 +483,9 @@ function Timeline({
           onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
         />
       ) : (
-        <div className="h-full flex flex-col gap-4 overflow-auto p-4 bg-secondary">
+        <div
+          className={`h-full grid grid-cols-1 gap-4 overflow-auto p-4 bg-secondary ${isDesktop ? "" : "sm:grid-cols-2"}`}
+        >
           {mainCameraReviewItems.map((review) => {
             if (review.severity == "significant_motion") {
               return;

web/src/views/live/LiveDashboardView.tsx

@@ -129,10 +129,10 @@ export default function LiveDashboardView({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   return (
-    <div className="size-full overflow-y-auto px-2">
+    <div className="size-full overflow-y-auto">
       {isMobile && (
-        <div className="relative h-9 flex items-center justify-between">
+        <div className="h-11 px-2 relative flex items-center justify-between">
-          <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
           <CameraGroupSelector />
           <div className="flex items-center gap-1">
             <Button
@@ -175,7 +175,7 @@ export default function LiveDashboardView({
       )}
 
       <div
-        className={`my-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
+        className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
       >
         {includeBirdseye && birdseyeConfig?.enabled && (
           <BirdseyeLivePlayer