Optimize user management interface for mobile devices with PWA support (#775)

### Summary & Motivation

This change transforms the user management interface into a mobile-first
experience with Progressive Web App (PWA) capabilities. The changes
ensure that the application feels native on mobile devices while
maintaining full functionality.

Changes include:
- Added PWA manifest and service worker for installable app experience
- Implemented full-screen dialogs and modals on mobile devices
- Added infinite scroll for user lists on mobile with optimized
performance
- Integrated iOS-specific optimizations:
  - Dynamic Island support
  - Safe area handling for notched devices
  - Viewport fit adjustments
- Enhanced touch interactions with axis locking for smooth scrolling
- Converted table layouts to responsive cards on mobile
- Fixed mobile menu overlays and navigation
- Added keyboard navigation support for accessibility
- Optimized avatar upload and image handling for mobile
- Improved form layouts and input fields for touch devices
- Added "Add to Home Screen" prompt component
- Implemented responsive breakpoints throughout the UI
- Enhanced modal positioning to respect safe areas
- Added mobile-specific scroll behavior improvements
- Optimized button sizes and touch targets for mobile
- Fixed dropdown and select components for mobile viewports
- Added proper viewport meta tags for mobile optimization
- Improved loading states and animations for mobile performance

The motivation is to provide administrators with a seamless experience
when managing users on mobile devices, whether accessing through a
browser or as an installed PWA. This enables on-the-go administration
without compromising functionality or user experience.

### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/AppGateway/appsettings.json

@@ -11,6 +11,50 @@
   "AllowedHosts": "*",
   "ReverseProxy": {
     "Routes": {
+      "favicon": {
+        "ClusterId": "account-management-static",
+        "Match": {
+          "Path": "/favicon.ico"
+        },
+        "Transforms": [
+          {
+            "ResponseHeader": "Cache-Control",
+            "Set": "public, max-age=604800"
+          },
+          {
+            "ResponseHeader": "Content-Type",
+            "Set": "image/x-icon"
+          }
+        ]
+      },
+      "apple-touch-icon": {
+        "ClusterId": "account-management-static",
+        "Match": {
+          "Path": "/apple-touch-icon.png"
+        },
+        "Transforms": [
+          {
+            "ResponseHeader": "Cache-Control",
+            "Set": "public, max-age=604800"
+          }
+        ]
+      },
+      "manifest": {
+        "ClusterId": "account-management-static",
+        "Match": {
+          "Path": "/manifest.json"
+        },
+        "Transforms": [
+          {
+            "ResponseHeader": "Cache-Control",
+            "Set": "public, max-age=604800"
+          },
+          {
+            "ResponseHeader": "Content-Type",
+            "Set": "application/manifest+json"
+          }
+        ]
+      },
       "root": {
         "ClusterId": "account-management-api",
         "Match": {

application/account-management/WebApp/federated-modules/common/SupportDialog.tsx

@@ -1,6 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog, DialogTrigger } from "@repo/ui/components/Dialog";
+import { DialogContent, DialogFooter, DialogHeader } from "@repo/ui/components/DialogFooter";
 import { Heading } from "@repo/ui/components/Heading";
 import { Modal } from "@repo/ui/components/Modal";
 import { MailIcon, XIcon } from "lucide-react";
@@ -15,26 +16,27 @@ export function SupportDialog({ children }: Readonly<SupportDialogProps>) {
     <DialogTrigger>
       {children}
       <Modal isDismissable={true} zIndex="high">
-        <Dialog className="max-w-lg">
+        <Dialog className="sm:max-w-lg">
           {({ close }) => (
             <>
               <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />
-              <Heading slot="title" className="text-2xl">
-                {t`Contact support`}
-              </Heading>
-              <p className="text-muted-foreground text-sm">{t`Need help? Our support team is here to assist you.`}</p>
-              <div className="mt-4 flex flex-col gap-4">
+              <DialogHeader description={t`Need help? Our support team is here to assist you.`}>
+                <Heading slot="title" className="text-2xl">
+                  {t`Contact support`}
+                </Heading>
+              </DialogHeader>
+              <DialogContent className="flex flex-col gap-4">
                 <div className="flex items-center gap-3 rounded-lg border border-input bg-input-background p-4 opacity-50">
                   <MailIcon className="h-5 w-5 text-muted-foreground" />
                   <a href="mailto:support@platformplatform.net" className="text-primary hover:underline">
                     support@platformplatform.net
                   </a>
                 </div>
                 <p className="text-muted-foreground text-sm">{t`Feel free to reach out with any questions or issues you may have.`}</p>
-                <div className="mt-6 flex justify-end gap-4">
-                  <Button onPress={close}>{t`Close`}</Button>
-                </div>
-              </div>
+              </DialogContent>
+              <DialogFooter>
+                <Button onPress={close}>{t`Close`}</Button>
+              </DialogFooter>
             </>
           )}
         </Dialog>

application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx

@@ -15,6 +15,20 @@ enum ThemeMode {
   Dark = "dark"
 }
 
+function updateThemeColorMeta() {
+  requestAnimationFrame(() => {
+    const root = document.documentElement;
+    const computedStyle = window.getComputedStyle(root);
+    const backgroundHsl = computedStyle.getPropertyValue("--background").trim();
+    const backgroundColor = backgroundHsl ? `hsl(${backgroundHsl.replace(/\s+/g, ", ")})` : "#000000";
+
+    const themeColorMetas = document.querySelectorAll('meta[name="theme-color"]');
+    themeColorMetas.forEach((meta) => {
+      meta.setAttribute("content", backgroundColor);
+    });
+  });
+}
+
 export default function ThemeModeSelector({
   variant = "icon",
   onAction
@@ -52,6 +66,8 @@ export default function ThemeModeSelector({
       }
     }
 
+    updateThemeColorMeta();
+
     // Listen for storage changes from other tabs/components
     const handleStorageChange = (e: StorageEvent) => {
       if (e.key === THEME_MODE_KEY && e.newValue) {
@@ -109,6 +125,8 @@ export default function ThemeModeSelector({
       }
     }
 
+    updateThemeColorMeta();
+
     // Dispatch event to notify other components
     window.dispatchEvent(new CustomEvent("theme-mode-changed", { detail: newMode }));
 
@@ -157,7 +175,11 @@ export default function ThemeModeSelector({
           </div>
         </Button>
       )}
-      <Menu onAction={handleThemeChange} aria-label={t`Change theme`} placement="bottom">
+      <Menu
+        onAction={handleThemeChange}
+        aria-label={t`Change theme`}
+        placement={variant === "mobile-menu" ? "bottom end" : "bottom"}
+      >
         <MenuItem id={ThemeMode.System} textValue="System">
           <div className="flex items-center gap-2">
             {window.matchMedia("(prefers-color-scheme: dark)").matches ? (