Mobile UI/UX improvements (#23402)

* increase camera group icon size on mobile

add an animated slider when there is not enough space for all defined camera groups

* change desktop and mobile edit camera groups icon to pencil and add desktop tooltip

* apply safe area insets to mobile layout in PWA mode using viewport-fit=cover

* adaptively size bottom bar nav targets to 48px when they fit, else compact

icon size now targets the standardized 48×48px mobile touch target (Material Design 3 / Android 48dp bottom-nav minimum)

web/src/components/ui/drawer.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils";
-import { isPWA } from "@/utils/isPWA";
-import { isIOS } from "react-device-detect";
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -43,10 +41,9 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-b-0 bg-background",
         className,
-        isIOS && isPWA && "pb-5",
-        isIOS && !isPWA && "md:pb-5",
+        "pb-[calc(0.25rem+env(safe-area-inset-bottom))]",
       )}
       {...props}
     >