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">
-        {allCameras.map((cam) => (
-          <div
-            key={cam}
-            className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
-            onClick={() => {
-              onSelectCamera(cam);
-              setCameraDrawer(false);
-            }}
-          >
-            {cam.replaceAll("_", " ")}
-          </div>
-        ))}
+      <DrawerContent className="max-h-[75dvh] px-4 mx-1 rounded-t-2xl overflow-hidden">
+        <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
+          {allCameras.map((cam) => (
+            <div
+              key={cam}
+              className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
+              onClick={() => {
+                onSelectCamera(cam);
+                setCameraDrawer(false);
+              }}
+            >
+              {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