From 9117043adc23aa53979e83b43a548e7f8e9011aa Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 09:59:27 -0600
Subject: [PATCH] UI tweaks for screen sizes (#11155)

* Make bottom bar items easier to tap

* Set max height on list of cameras and labels

* remove incorrect character

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
---
 web/src/components/filter/ReviewFilterGroup.tsx |  4 ++--
 web/src/components/menu/AccountSettings.tsx     |  7 +++++--
 web/src/components/menu/GeneralSettings.tsx     |  4 ++--
 web/src/components/navigation/Bottombar.tsx     | 17 +++++++++++------
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 2248835a2..0b0283a91 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -248,7 +248,7 @@ export function CamerasFilterButton({
           <DropdownMenuSeparator />
         </>
       )}
-      <div className="h-auto p-4 overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] p-4 overflow-y-auto overflow-x-hidden">
         <FilterSwitch
           isChecked={currentCameras == undefined}
           label="All Cameras"
@@ -571,7 +571,7 @@ export function GeneralFilterContent({
 }: GeneralFilterContentProps) {
   return (
     <>
-      <div className="h-auto overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
         <div className="flex justify-between items-center my-2.5">
           <Label
             className="mx-2 text-primary cursor-pointer"
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index afa63ae4c..72d05e81f 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -6,12 +6,15 @@ import {
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
 
-export default function AccountSettings() {
+type AccountSettingsProps = {
+  className?: string;
+};
+export default function AccountSettings({ className }: AccountSettingsProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
         >
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index 637a13193..f868eddb5 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -66,10 +66,10 @@ import {
   DialogTrigger,
 } from "../ui/dialog";
 
-type GeneralSettings = {
+type GeneralSettingsProps = {
   className?: string;
 };
-export default function GeneralSettings({ className }: GeneralSettings) {
+export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
   const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 4b646dc5f..d0059ffcf 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -21,16 +21,19 @@ function Bottombar() {
   return (
     <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
       {navItems.map((item) => (
-        <NavItem key={item.id} item={item} Icon={item.icon} />
+        <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
       ))}
-      <GeneralSettings />
-      <AccountSettings />
-      <StatusAlertNav />
+      <GeneralSettings className="p-2" />
+      <AccountSettings className="p-2" />
+      <StatusAlertNav className="p-2" />
     </div>
   );
 }
 
-function StatusAlertNav() {
+type StatusAlertNavProps = {
+  className?: string;
+};
+function StatusAlertNav({ className }: StatusAlertNavProps) {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
@@ -71,7 +74,9 @@ function StatusAlertNav() {
       <DrawerTrigger>
         <IoIosWarning className="size-5 text-danger" />
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
+      <DrawerContent
+        className={`max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
+      >
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="w-full flex items-center gap-2">