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/navigation/NavItem.tsx

@@ -27,6 +27,7 @@ type NavItemProps = {
   item: NavData;
   Icon: IconType;
   onClick?: () => void;
+  large?: boolean;
 };
 
 export default function NavItem({
@@ -34,6 +35,7 @@ export default function NavItem({
   item,
   Icon,
   onClick,
+  large,
 }: NavItemProps) {
   const { t } = useTranslation(["common"]);
   if (item.enabled == false) {
@@ -48,11 +50,12 @@ export default function NavItem({
         cn(
           "flex flex-col items-center justify-center rounded-lg p-[6px]",
           className,
+          large && "size-12",
           variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
         )
       }
     >
-      <Icon className="size-5" />
+      <Icon className={large ? "size-6" : "size-5"} />
     </NavLink>
   );