Optimize user management interface for mobile devices with PWA support

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 ? (