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/menu/GeneralSettings.tsx

@@ -82,9 +82,13 @@ import { MdCategory } from "react-icons/md";
 
 type GeneralSettingsProps = {
   className?: string;
+  large?: boolean;
 };
 
-export default function GeneralSettings({ className }: GeneralSettingsProps) {
+export default function GeneralSettings({
+  className,
+  large,
+}: GeneralSettingsProps) {
   const { t } = useTranslation(["common", "views/settings"]);
   const { getLocaleDocUrl } = useDocDomain();
   const { data: profile } = useSWR("profile");
@@ -225,10 +229,13 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   isDesktop
                     ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
                     : "text-secondary-foreground",
+                  large && "size-12",
                   className,
                 )}
               >
-                <LuSettings className="size-5 md:m-[6px]" />
+                <LuSettings
+                  className={cn("md:m-[6px]", large ? "size-6" : "size-5")}
+                />
               </div>
             </TooltipTrigger>
             <TooltipPortal>