From 178ac7a23c19a01fbbb924e4470ea8ac00545d90 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Mon, 21 Jul 2025 19:54:23 +0200
Subject: [PATCH 01/37] Add favicon and apple-touch-icon routes to AppGateway
 for proper icon serving

---
 application/AppGateway/appsettings.json | 28 +++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/application/AppGateway/appsettings.json b/application/AppGateway/appsettings.json
index 7595556c9..c1f5ca5e9 100644
--- a/application/AppGateway/appsettings.json
+++ b/application/AppGateway/appsettings.json
@@ -11,6 +11,34 @@
   "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"
+          }
+        ]
+      },
       "root": {
         "ClusterId": "account-management-api",
         "Match": {

From c0b56da783cbb4b0207f342671c85b2d4753dabc Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Tue, 22 Jul 2025 20:21:47 +0200
Subject: [PATCH 02/37] Fix keyboard navigation and focus management for
 UserTable on mobile screens

---
 .../users/-components/UserProfileSidePane.tsx | 48 ++++++++--
 .../admin/users/-components/UserTable.tsx     | 87 ++++++++++++++++---
 .../WebApp/routes/admin/users/index.tsx       | 14 ++-
 3 files changed, 129 insertions(+), 20 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
index 323825fed..e1052b1c3 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -135,17 +135,40 @@ function useSidePaneAccessibility(
   sidePaneRef: React.RefObject<HTMLDivElement | null>,
   closeButtonRef: React.RefObject<SVGSVGElement | null>
 ) {
+  const previouslyFocusedElement = useRef<HTMLElement | null>(null);
+
   useEffect(() => {
-    const isMobileScreen = !window.matchMedia(MEDIA_QUERIES.sm).matches;
-    if (isOpen && closeButtonRef.current && isMobileScreen) {
+    const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+    if (isOpen && closeButtonRef.current && isSmallScreen) {
+      // Store the currently focused element before moving focus
+      previouslyFocusedElement.current = document.activeElement as HTMLElement;
       closeButtonRef.current.focus();
     }
   }, [isOpen, closeButtonRef]);
 
+  // Prevent body scroll on small screens when side pane is open
+  useEffect(() => {
+    const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+    if (isOpen && isSmallScreen) {
+      const originalStyle = window.getComputedStyle(document.body).overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalStyle;
+      };
+    }
+  }, [isOpen]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && isOpen) {
         event.preventDefault();
+        const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+
+        // Restore focus on small screens before closing
+        if (isSmallScreen && previouslyFocusedElement.current) {
+          previouslyFocusedElement.current.focus();
+        }
+
         onClose();
       }
     };
@@ -160,8 +183,8 @@ function useSidePaneAccessibility(
   }, [isOpen, onClose]);
 
   useEffect(() => {
-    const isMobileScreen = !window.matchMedia(MEDIA_QUERIES.sm).matches;
-    if (!isOpen || !sidePaneRef.current || !isMobileScreen) {
+    const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+    if (!isOpen || !sidePaneRef.current || !isSmallScreen) {
       return;
     }
 
@@ -206,6 +229,18 @@ export function UserProfileSidePane({
   const sidePaneRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<SVGSVGElement>(null);
   const [isChangeRoleDialogOpen, setIsChangeRoleDialogOpen] = useState(false);
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  // Check screen size for backdrop rendering
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsSmallScreen(!window.matchMedia(MEDIA_QUERIES.md).matches);
+    };
+
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
 
   useSidePaneAccessibility(isOpen, onClose, sidePaneRef, closeButtonRef);
 
@@ -218,10 +253,13 @@ export function UserProfileSidePane({
 
   return (
     <>
+      {/* Backdrop for small screens */}
+      {isSmallScreen && <div className="fixed inset-0 z-[59] bg-black/50" aria-hidden="true" />}
+
       {/* Side pane */}
       <aside
         ref={sidePaneRef}
-        className="relative flex h-full w-full flex-col border-border border-l bg-background"
+        className="relative z-[60] flex h-full w-full flex-col border-border border-l bg-background"
         aria-label={t`User profile details`}
       >
         {/* Close button - positioned like modal dialogs */}
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index a96185d20..de0d49aac 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -10,6 +10,7 @@ import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Pagination } from "@repo/ui/components/Pagination";
 import { Cell, Column, Row, Table, TableHeader } from "@repo/ui/components/Table";
 import { Text } from "@repo/ui/components/Text";
+import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
 import { formatDate } from "@repo/utils/date/formatDate";
 import { getInitials } from "@repo/utils/string/getInitials";
 import { useNavigate, useSearch } from "@tanstack/react-router";
@@ -47,6 +48,7 @@ export function UserTable({
     column: orderBy ?? "email",
     direction: sortOrder === "Ascending" ? "ascending" : "descending"
   }));
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
 
   const { data: users, isLoading } = api.useQuery("get", "/api/account-management/users", {
     params: {
@@ -103,30 +105,87 @@ export function UserTable({
     }
   }, [users?.users, onUsersLoaded]);
 
+  // Track keyboard vs mouse interaction
+  useEffect(() => {
+    const handleKeyDown = () => {
+      setIsKeyboardNavigation(true);
+    };
+
+    const handleMouseDown = () => {
+      setIsKeyboardNavigation(false);
+    };
+
+    const handlePointerDown = () => {
+      setIsKeyboardNavigation(false);
+    };
+
+    // Use capture phase to ensure we set the flag before any click handlers
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("mousedown", handleMouseDown, true);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("mousedown", handleMouseDown, true);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, []);
+
   const handleSelectionChange = useCallback(
     (keys: Selection) => {
       if (keys === "all") {
         onSelectedUsersChange(users?.users ?? []);
-        // Close profile when selecting all users
         onViewProfile(null);
-      } else {
-        const selectedKeys = typeof keys === "string" ? new Set([keys]) : keys;
-        const selectedUsersList = users?.users.filter((user) => selectedKeys.has(user.id)) ?? [];
-        onSelectedUsersChange(selectedUsersList);
+        return;
+      }
 
-        // Handle profile viewing based on selection
-        if (selectedUsersList.length === 1) {
-          // Single user selected - show profile
-          onViewProfile(selectedUsersList[0]);
-        } else {
-          // Multiple users selected or no users selected - close profile
-          onViewProfile(null);
-        }
+      const selectedUsersList = users?.users.filter((user) => keys.has(user.id)) ?? [];
+      onSelectedUsersChange(selectedUsersList);
+
+      // Handle profile viewing
+      if (selectedUsersList.length !== 1) {
+        onViewProfile(null);
+        return;
+      }
+
+      // Single user selected - check if we should auto-open profile
+      const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+      const shouldAutoOpen = !isSmallScreen || !isKeyboardNavigation;
+
+      if (shouldAutoOpen) {
+        onViewProfile(selectedUsersList[0]);
       }
     },
-    [users?.users, onSelectedUsersChange, onViewProfile]
+    [users?.users, onSelectedUsersChange, onViewProfile, isKeyboardNavigation]
   );
 
+  // Handle Enter key to open profile
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle if focus is within the table area
+      const activeElement = document.activeElement;
+      const tableContainer = document.querySelector(".min-h-0.flex-1");
+
+      if (tableContainer?.contains(activeElement)) {
+        if (e.key === "Enter" && selectedUsers.length === 1) {
+          const target = e.target as HTMLElement;
+          // Don't interfere with menu triggers or buttons
+          if (target.tagName !== "BUTTON" && !target.closest("button")) {
+            e.preventDefault();
+            e.stopPropagation();
+            onViewProfile(selectedUsers[0]);
+          }
+        }
+      }
+    };
+
+    // Add the handler for all screen sizes
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [selectedUsers, onViewProfile]);
+
   if (isLoading) {
     return null;
   }
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index eb0ff777e..3e123f11d 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -4,6 +4,7 @@ import { SortOrder, SortableUserProperties, UserRole, UserStatus, api, type comp
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
+import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { z } from "zod";
@@ -44,8 +45,19 @@ export default function UsersPage() {
 
   const handleCloseProfile = () => {
     setProfileUser(null);
-    setSelectedUsers([]);
     navigate({ search: (prev) => ({ ...prev, userId: undefined }) });
+
+    // Restore focus to the selected row on small screens
+    const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+    if (isSmallScreen && selectedUsers.length === 1) {
+      // Use setTimeout to ensure DOM has updated
+      setTimeout(() => {
+        const selectedRow = document.querySelector(`[data-key="${selectedUsers[0].id}"]`);
+        if (selectedRow) {
+          (selectedRow as HTMLElement).focus();
+        }
+      }, 0);
+    }
   };
 
   const handleViewProfile = (user: UserDetails | null) => {

From 959d7238239f066f2521e9a13727dc10b4ebc6ae Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Tue, 22 Jul 2025 21:28:43 +0200
Subject: [PATCH 03/37] Show Invite user tooltip on mobile devices

---
 .../WebApp/routes/admin/users/-components/UserQuerying.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index e648f8afc..14a12db46 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -262,7 +262,8 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
   useEffect(() => {
     // On 2XL+ screens, keep full buttons even with filters
     const is2XlScreen = window.matchMedia("(min-width: 1536px)").matches;
-    const shouldUseCompactButtons = !is2XlScreen && (showAllFilters || activeFilterCount > 0);
+    const isMobileScreen = window.matchMedia("(max-width: 639px)").matches; // sm breakpoint
+    const shouldUseCompactButtons = (!is2XlScreen && (showAllFilters || activeFilterCount > 0)) || isMobileScreen;
 
     onFilterStateChange?.(showAllFilters, activeFilterCount > 0, shouldUseCompactButtons);
   }, [showAllFilters, activeFilterCount, onFilterStateChange]);

From 1d0661852bdf8ddb86bca85b0f584f4418a0a063 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Tue, 22 Jul 2025 21:47:35 +0200
Subject: [PATCH 04/37] Include search term in filter dialog clear
 functionality and show tooltips on mobile

---
 .../admin/users/-components/UserQuerying.tsx  | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index 14a12db46..e2348a7fd 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -88,10 +88,14 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
 
   // Debounce search updates to avoid too many URL changes while typing
   useEffect(() => {
+    // Normalize empty string and undefined to prevent unnecessary updates
+    const normalizedSearch = search || undefined;
+    const normalizedParamSearch = searchParams.search || undefined;
+
     // Only update if search value actually changed from URL params
-    if (search !== searchParams.search) {
+    if (normalizedSearch !== normalizedParamSearch) {
       const timeoutId = setTimeout(() => {
-        updateFilter({ search: (search as string) || undefined }, true);
+        updateFilter({ search: normalizedSearch }, true);
         setSearchTimeoutId(null);
       }, 500);
       setSearchTimeoutId(timeoutId);
@@ -269,7 +273,18 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
   }, [showAllFilters, activeFilterCount, onFilterStateChange]);
 
   const clearAllFilters = () => {
-    updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined });
+    // Set search to empty string first to ensure UI updates immediately
+    setSearch("");
+
+    // Then update the filter which will set search to undefined in URL
+    updateFilter({
+      search: undefined,
+      userRole: undefined,
+      userStatus: undefined,
+      startDate: undefined,
+      endDate: undefined
+    });
+
     setShowAllFilters(false);
     setIsFilterPanelOpen(false);
   };
@@ -432,6 +447,21 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
           </Heading>
 
           <div className="mt-4 flex flex-col gap-4">
+            <SearchField
+              placeholder={t`Search`}
+              value={search}
+              onChange={setSearch}
+              onSubmit={() => {
+                if (searchTimeoutId) {
+                  clearTimeout(searchTimeoutId);
+                  setSearchTimeoutId(null);
+                }
+                updateFilter({ search: (search as string) || undefined }, true);
+              }}
+              label={t`Search`}
+              className="w-full"
+            />
+
             <Select
               selectedKey={searchParams.userRole}
               onSelectionChange={(userRole) => {
@@ -485,7 +515,11 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
           </div>
 
           <div className="mt-6 flex justify-end gap-4">
-            <Button variant="secondary" onPress={clearAllFilters} isDisabled={activeFilterCount === 0}>
+            <Button
+              variant="secondary"
+              onPress={clearAllFilters}
+              isDisabled={activeFilterCount === 0 && !searchParams.search}
+            >
               <Trans>Clear</Trans>
             </Button>
             <Button variant="primary" onPress={() => setIsFilterPanelOpen(false)}>

From 285647c781f1bd4f5b1fa8fa992e02d2890c111e Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Thu, 24 Jul 2025 18:04:02 +0200
Subject: [PATCH 05/37] Fix user selection issue on mobile devices

---
 .../users/-components/UserProfileSidePane.tsx | 24 ++++++-------------
 .../admin/users/-components/UserTable.tsx     | 13 +++++-----
 .../WebApp/routes/admin/users/index.tsx       |  9 ++++---
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
index e1052b1c3..9a9dad309 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -133,18 +133,17 @@ function useSidePaneAccessibility(
   isOpen: boolean,
   onClose: () => void,
   sidePaneRef: React.RefObject<HTMLDivElement | null>,
-  closeButtonRef: React.RefObject<SVGSVGElement | null>
+  _closeButtonRef: React.RefObject<SVGSVGElement | null>
 ) {
   const previouslyFocusedElement = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
     const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
-    if (isOpen && closeButtonRef.current && isSmallScreen) {
+    if (isOpen && isSmallScreen) {
       // Store the currently focused element before moving focus
       previouslyFocusedElement.current = document.activeElement as HTMLElement;
-      closeButtonRef.current.focus();
     }
-  }, [isOpen, closeButtonRef]);
+  }, [isOpen]);
 
   // Prevent body scroll on small screens when side pane is open
   useEffect(() => {
@@ -162,12 +161,9 @@ function useSidePaneAccessibility(
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && isOpen) {
         event.preventDefault();
-        const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+        const _isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
 
-        // Restore focus on small screens before closing
-        if (isSmallScreen && previouslyFocusedElement.current) {
-          previouslyFocusedElement.current.focus();
-        }
+        // Don't restore focus - let the parent handle it
 
         onClose();
       }
@@ -265,16 +261,10 @@ export function UserProfileSidePane({
         {/* Close button - positioned like modal dialogs */}
         <XIcon
           ref={closeButtonRef}
-          onClick={onClose}
+          onClick={() => onClose()}
           className="absolute top-3 right-2 z-10 h-10 w-10 cursor-pointer p-2 hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           aria-label={t`Close user profile`}
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onClose();
-            }
-          }}
+          tabIndex={-1}
         />
 
         <div className="h-16 border-border border-t border-b bg-muted/30 px-4 py-8 backdrop-blur-sm">
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index de0d49aac..1641bdb12 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -24,7 +24,7 @@ type UserDetails = components["schemas"]["UserDetails"];
 interface UserTableProps {
   selectedUsers: UserDetails[];
   onSelectedUsersChange: (users: UserDetails[]) => void;
-  onViewProfile: (user: UserDetails | null) => void;
+  onViewProfile: (user: UserDetails | null, isKeyboardOpen?: boolean) => void;
   onDeleteUser: (user: UserDetails) => void;
   onChangeRole: (user: UserDetails) => void;
   onUsersLoaded?: (users: UserDetails[]) => void;
@@ -153,7 +153,7 @@ export function UserTable({
       const shouldAutoOpen = !isSmallScreen || !isKeyboardNavigation;
 
       if (shouldAutoOpen) {
-        onViewProfile(selectedUsersList[0]);
+        onViewProfile(selectedUsersList[0], isKeyboardNavigation);
       }
     },
     [users?.users, onSelectedUsersChange, onViewProfile, isKeyboardNavigation]
@@ -173,7 +173,7 @@ export function UserTable({
           if (target.tagName !== "BUTTON" && !target.closest("button")) {
             e.preventDefault();
             e.stopPropagation();
-            onViewProfile(selectedUsers[0]);
+            onViewProfile(selectedUsers[0], true);
           }
         }
       }
@@ -191,15 +191,16 @@ export function UserTable({
   }
 
   const currentPage = (users?.currentPageOffset ?? 0) + 1;
+  const isSmallScreen = typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.md).matches;
 
   return (
     <div className="flex h-full flex-col">
       <div className="min-h-0 flex-1">
         <Table
           key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
-          selectionMode="multiple"
+          selectionMode={isSmallScreen ? "single" : "multiple"}
           selectionBehavior="replace"
-          selectedKeys={selectedUsers.map((user) => user.id)}
+          selectedKeys={new Set(selectedUsers.map((user) => user.id))}
           onSelectionChange={handleSelectionChange}
           sortDescriptor={sortDescriptor}
           onSortChange={handleSortChange}
@@ -282,7 +283,7 @@ export function UserTable({
                         <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
                       </Button>
                       <Menu>
-                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user)}>
+                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
                           <UserIcon className="h-4 w-4" />
                           <Trans>View profile</Trans>
                         </MenuItem>
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index 3e123f11d..cd2f6f731 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -4,7 +4,6 @@ import { SortOrder, SortableUserProperties, UserRole, UserStatus, api, type comp
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
-import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { z } from "zod";
@@ -47,10 +46,10 @@ export default function UsersPage() {
     setProfileUser(null);
     navigate({ search: (prev) => ({ ...prev, userId: undefined }) });
 
-    // Restore focus to the selected row on small screens
-    const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
-    if (isSmallScreen && selectedUsers.length === 1) {
-      // Use setTimeout to ensure DOM has updated
+    // On both mobile and desktop, maintain selection when closing side pane
+    // This allows for continuous keyboard navigation
+    // Also restore focus to the selected row to enable keyboard navigation
+    if (selectedUsers.length === 1) {
       setTimeout(() => {
         const selectedRow = document.querySelector(`[data-key="${selectedUsers[0].id}"]`);
         if (selectedRow) {

From a5409f92f21e8721ae4612389febcca3756ea61f Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 01:23:18 +0200
Subject: [PATCH 06/37] Fix mobile menu scrolling with proper overflow handling

---
 .../federated-modules/sideMenu/MobileMenu.tsx | 25 +++++++++----------
 .../shared-webapp/ui/components/SideMenu.tsx  | 10 ++++----
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
index c0508abfd..5724d0b66 100644
--- a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
+++ b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
@@ -142,22 +142,21 @@ export function MobileMenu({
   onEditProfile
 }: Readonly<{ currentSystem: FederatedSideMenuProps["currentSystem"]; onEditProfile: () => void }>) {
   return (
-    <div className="flex h-full flex-col">
-      <MobileMenuHeader onEditProfile={onEditProfile} />
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <MobileMenuHeader onEditProfile={onEditProfile} />
 
-      {/* Divider */}
-      <div className="mx-3 my-5 border-border border-b" />
+        {/* Divider */}
+        <div className="mx-3 my-5 border-border border-b" />
 
-      {/* Navigation Section for Mobile */}
-      <div className="flex flex-col gap-3">
-        <SideMenuSeparator>
-          <Trans>Navigation</Trans>
-        </SideMenuSeparator>
-        <NavigationMenuItems currentSystem={currentSystem} />
+        {/* Navigation Section for Mobile */}
+        <div className="flex flex-col gap-3 pb-20">
+          <SideMenuSeparator>
+            <Trans>Navigation</Trans>
+          </SideMenuSeparator>
+          <NavigationMenuItems currentSystem={currentSystem} />
+        </div>
       </div>
-
-      {/* Spacer to push content up */}
-      <div className="flex-1" />
     </div>
   );
 }
diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index d1f3267d0..f62b7fa7b 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -996,21 +996,21 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
         <overlayContext.Provider value={{ isOpen, close: () => setIsOpen(false) }}>
           <dialog
             className="fixed inset-0 z-[200] h-[100vh] w-[100vw] bg-background"
-            style={{ margin: 0, padding: 0, border: "none", top: 0, left: 0, right: 0, bottom: 0 }}
+            style={{ margin: 0, padding: 0, border: "none", top: 0, left: 0, right: 0, bottom: 0, display: "flex" }}
             aria-label="Mobile navigation menu"
             open={true}
           >
             <nav
-              className="flex h-[100vh] w-[100vw] flex-col bg-background"
+              className="flex h-full w-full flex-col bg-background"
               ref={dialogRef}
               style={{ margin: 0, padding: 0 }}
               aria-label="Mobile navigation"
             >
               <div
-                className="flex-1 overflow-y-auto px-3"
-                style={{ margin: 0, padding: "0 12px", pointerEvents: "auto" }}
+                className="flex-1 overflow-y-auto overflow-x-hidden px-3"
+                style={{ margin: 0, padding: "0 12px", pointerEvents: "auto", WebkitOverflowScrolling: "touch" }}
               >
-                {topMenuContent && <div className="pt-5 pb-3">{topMenuContent}</div>}
+                {topMenuContent && <div className="pt-5 pb-20">{topMenuContent}</div>}
               </div>
 
               {/* Floating close button at bottom right - same position as hamburger */}

From 0b1ad8e14cc0b6ea1e065b6d8c3c29f90b8a885e Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 01:22:55 +0200
Subject: [PATCH 07/37] Make dialogs and modals full screen on mobile with
 sticky footer support

---
 .../shared-webapp/ui/components/Dialog.tsx    |  6 +-
 .../ui/components/DialogFooter.tsx            | 56 +++++++++++++++++++
 .../shared-webapp/ui/components/Modal.tsx     | 11 +++-
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 application/shared-webapp/ui/components/DialogFooter.tsx

diff --git a/application/shared-webapp/ui/components/Dialog.tsx b/application/shared-webapp/ui/components/Dialog.tsx
index f26e35a8a..3b2fd639a 100644
--- a/application/shared-webapp/ui/components/Dialog.tsx
+++ b/application/shared-webapp/ui/components/Dialog.tsx
@@ -8,7 +8,11 @@ export function Dialog(props: Readonly<DialogProps>) {
     <AriaDialog
       {...props}
       className={twMerge(
-        "relative max-h-full min-h-0 overflow-y-auto overscroll-contain p-4 outline outline-0 sm:p-11 [[data-placement]>&]:p-4",
+        "relative max-h-full min-h-0 outline outline-0",
+        "max-sm:flex max-sm:h-full max-sm:w-full max-sm:max-w-full max-sm:flex-col",
+        "sm:overflow-y-auto sm:overscroll-contain",
+        "p-6 sm:p-8",
+        "[[data-placement]>&]:p-4",
         props.className
       )}
     />
diff --git a/application/shared-webapp/ui/components/DialogFooter.tsx b/application/shared-webapp/ui/components/DialogFooter.tsx
new file mode 100644
index 000000000..e77fb5963
--- /dev/null
+++ b/application/shared-webapp/ui/components/DialogFooter.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface DialogFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+interface DialogHeaderProps {
+  children: ReactNode;
+  className?: string;
+  description?: ReactNode;
+}
+
+export function DialogFooter({ children, className }: Readonly<DialogFooterProps>) {
+  return (
+    <div
+      className={twMerge(
+        "mt-8 flex justify-end gap-4",
+        "max-sm:fixed max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:mt-0 max-sm:border-border max-sm:border-t max-sm:bg-background max-sm:p-4 max-sm:shadow-lg",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DialogHeader({ children, className, description }: Readonly<DialogHeaderProps>) {
+  return (
+    <div className={twMerge("mb-6", className)}>
+      {children}
+      {description && <p className="mt-2 text-muted-foreground text-sm">{description}</p>}
+    </div>
+  );
+}
+
+export function DialogContent({ children, className }: Readonly<{ children: ReactNode; className?: string }>) {
+  return (
+    <div
+      className={twMerge(
+        "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+        "max-sm:pb-20", // Add padding to account for fixed footer on mobile
+        "-webkit-overflow-scrolling-touch",
+        "max-sm:-mx-6 max-sm:px-6", // Extend scrollbar to edge while maintaining content padding
+        className
+      )}
+      style={{
+        WebkitOverflowScrolling: "touch",
+        scrollbarGutter: "stable"
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/application/shared-webapp/ui/components/Modal.tsx b/application/shared-webapp/ui/components/Modal.tsx
index dfca62963..4ae8ef7ad 100644
--- a/application/shared-webapp/ui/components/Modal.tsx
+++ b/application/shared-webapp/ui/components/Modal.tsx
@@ -23,7 +23,7 @@ const overlayStyles = tv({
     },
     fullSize: {
       true: "",
-      false: "p-2 sm:p-4"
+      false: "p-2 max-sm:p-0 sm:p-4"
     },
     blur: {
       true: "backdrop-blur-lg",
@@ -43,14 +43,21 @@ const overlayStyles = tv({
 });
 
 const modalStyles = tv({
-  base: "flex max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-lg border border-border bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl sm:w-fit dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]",
+  base: "flex w-full flex-col overflow-hidden bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]",
   variants: {
     isEntering: {
       true: "zoom-in-105 animate-in duration-200 ease-out"
     },
     isExiting: {
       true: "zoom-out-95 animate-out duration-200 ease-in"
+    },
+    isFullScreenMobile: {
+      true: "max-sm:h-full max-sm:max-h-full max-sm:rounded-none max-sm:border-0 sm:max-h-[calc(100vh-2rem)] sm:w-fit sm:rounded-lg sm:border sm:border-border",
+      false: "max-h-[calc(100vh-2rem)] rounded-lg border border-border sm:w-fit"
     }
+  },
+  defaultVariants: {
+    isFullScreenMobile: true
   }
 });
 

From 2cba23b4eece6d960bfe6fb64a9ba4bbb0feaf6d Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 01:23:07 +0200
Subject: [PATCH 08/37] Update all dialogs to use DialogFooter for consistent
 mobile CTA placement

---
 .../common/SupportDialog.tsx                  |  22 +-
 .../common/UserProfileModal.tsx               | 285 +++++++++---------
 .../-components/DeleteAccountConfirmation.tsx |  22 +-
 .../-components/ChangeUserRoleDialog.tsx      |  49 +--
 .../users/-components/InviteUserDialog.tsx    |  41 +--
 .../admin/users/-components/UserQuerying.tsx  |  17 +-
 6 files changed, 225 insertions(+), 211 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/common/SupportDialog.tsx b/application/account-management/WebApp/federated-modules/common/SupportDialog.tsx
index 887900815..4507bd914 100644
--- a/application/account-management/WebApp/federated-modules/common/SupportDialog.tsx
+++ b/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,15 +16,16 @@ 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">
@@ -31,10 +33,10 @@ export function SupportDialog({ children }: Readonly<SupportDialogProps>) {
                   </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>
diff --git a/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx b/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
index c5bc34da9..df2816a20 100644
--- a/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
+++ b/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
@@ -4,6 +4,8 @@ import { Trans } from "@lingui/react/macro";
 import { AuthenticationContext } from "@repo/infrastructure/auth/AuthenticationProvider";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog } from "@repo/ui/components/Dialog";
+import { DialogContent, DialogFooter, DialogHeader } from "@repo/ui/components/DialogFooter";
+import { Heading } from "@repo/ui/components/Heading";
 import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "@repo/ui/components/Menu";
 import { Modal } from "@repo/ui/components/Modal";
 import { TextField } from "@repo/ui/components/TextField";
@@ -12,8 +14,7 @@ import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { useMutation } from "@tanstack/react-query";
 import { CameraIcon, MailIcon, Trash2Icon, XIcon } from "lucide-react";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { FileTrigger, Form, Heading, Label } from "react-aria-components";
-import { createPortal } from "react-dom";
+import { FileTrigger, Form, Label } from "react-aria-components";
 
 const MAX_FILE_SIZE = 1024 * 1024; // 1MB in bytes
 const ALLOWED_FILE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]; // Align with backend
@@ -23,27 +24,8 @@ type ProfileModalProps = {
   onOpenChange: (isOpen: boolean) => void;
 };
 
-type ProfileDialogProps = ProfileModalProps & {
-  onIsLoadingChange: (isLoading: boolean) => void;
-};
-
 export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<ProfileModalProps>) {
   const [isLoading, setIsLoading] = useState(false);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  // Use a portal to render the modal at the document body level to avoid overlay conflicts
-  return createPortal(
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={!isLoading} zIndex="high">
-      <UserProfileDialog isOpen={isOpen} onOpenChange={onOpenChange} onIsLoadingChange={setIsLoading} />
-    </Modal>,
-    document.body
-  );
-}
-
-function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<ProfileDialogProps>) {
   const [selectedAvatarFile, setSelectedAvatarFile] = useState<File | null>(null);
   const [avatarPreviewUrl, setAvatarPreviewUrl] = useState<string | null>(null);
   const [avatarMenuOpen, setAvatarMenuOpen] = useState(false);
@@ -53,11 +35,16 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<Profile
 
   const { updateUserInfo } = useContext(AuthenticationContext);
 
-  const { data: user, isLoading, error, refetch } = api.useQuery("get", "/api/account-management/users/me");
+  const {
+    data: user,
+    isLoading: isLoadingUser,
+    error,
+    refetch
+  } = api.useQuery("get", "/api/account-management/users/me");
 
   useEffect(() => {
-    onIsLoadingChange(isLoading);
-  }, [onIsLoadingChange, isLoading]);
+    setIsLoading(isLoadingUser);
+  }, [isLoadingUser]);
 
   // Close dialog and cleanup
   const closeDialog = useCallback(() => {
@@ -130,134 +117,144 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<Profile
     }
   };
 
-  if (!user) {
-    return (
-      <Dialog aria-label={t`User profile`}>
-        <Heading slot="title">
-          {isLoading && <Trans>Fetching data...</Trans>}
-          {error && JSON.stringify(error)}
-        </Heading>
-      </Dialog>
-    );
+  if (!isOpen) {
+    return null;
   }
 
   return (
-    <Dialog aria-label={t`User profile`}>
-      <XIcon onClick={closeDialog} className="absolute top-2 right-2 h-10 w-10 p-2 hover:bg-muted" />
-      <Heading slot="title" className="text-2xl">
-        <Trans>User profile</Trans>
-      </Heading>
-      <p className="text-muted-foreground text-sm">
-        <Trans>Update your profile picture and personal details here.</Trans>
-      </p>
-
-      <Form
-        onSubmit={mutationSubmitter(saveMutation)}
-        validationBehavior="aria"
-        validationErrors={saveMutation.error?.errors}
-        className="mt-4 flex flex-col gap-4"
-      >
-        <FileTrigger
-          ref={avatarFileInputRef}
-          onSelect={(files) => {
-            setAvatarMenuOpen(false);
-            onFileSelect(files);
-          }}
-          acceptedFileTypes={ALLOWED_FILE_TYPES}
-        />
-
-        <Label>
-          <Trans>Profile picture</Trans>
-        </Label>
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={!isLoading} zIndex="high">
+      {!user ? (
+        <Dialog aria-label={t`User profile`}>
+          <Heading slot="title">
+            {isLoadingUser && <Trans>Fetching data...</Trans>}
+            {error && JSON.stringify(error)}
+          </Heading>
+        </Dialog>
+      ) : (
+        <Dialog aria-label={t`User profile`} className="max-sm:flex max-sm:flex-col max-sm:overflow-hidden">
+          <XIcon onClick={closeDialog} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />
+          <DialogHeader description={<Trans>Update your profile picture and personal details here.</Trans>}>
+            <Heading slot="title" className="text-2xl">
+              <Trans>User profile</Trans>
+            </Heading>
+          </DialogHeader>
 
-        <MenuTrigger isOpen={avatarMenuOpen} onOpenChange={setAvatarMenuOpen}>
-          <Button
-            variant="icon"
-            className="mb-3 h-16 w-16 rounded-full bg-secondary hover:bg-secondary/80"
-            aria-label={t`Change profile picture`}
+          <Form
+            onSubmit={mutationSubmitter(saveMutation)}
+            validationBehavior="aria"
+            validationErrors={saveMutation.error?.errors}
+            className="flex min-h-0 flex-1 flex-col"
           >
-            {user.avatarUrl || avatarPreviewUrl ? (
-              <img
-                src={avatarPreviewUrl ?? user.avatarUrl ?? ""}
-                className="h-full w-full rounded-full object-cover"
-                alt={t`Preview avatar`}
+            <DialogContent className="flex flex-col gap-4">
+              <FileTrigger
+                ref={avatarFileInputRef}
+                onSelect={(files) => {
+                  setAvatarMenuOpen(false);
+                  onFileSelect(files);
+                }}
+                acceptedFileTypes={ALLOWED_FILE_TYPES}
               />
-            ) : (
-              <CameraIcon className="size-10 text-secondary-foreground" aria-label={t`Add profile picture`} />
-            )}
-          </Button>
-          <Menu>
-            <MenuItem
-              onAction={() => {
-                avatarFileInputRef.current?.click();
-              }}
-            >
-              <CameraIcon className="h-4 w-4" />
-              <Trans>Upload profile picture</Trans>
-            </MenuItem>
-            {(user.avatarUrl || avatarPreviewUrl) && (
-              <>
-                <MenuSeparator />
-                <MenuItem
-                  onAction={() => {
-                    setAvatarMenuOpen(false);
-                    setRemoveAvatarFlag(true);
-                    setSelectedAvatarFile(null);
-                    setAvatarPreviewUrl(null);
-                    user.avatarUrl = null;
-                  }}
+
+              <Label>
+                <Trans>Profile picture</Trans>
+              </Label>
+
+              <MenuTrigger isOpen={avatarMenuOpen} onOpenChange={setAvatarMenuOpen}>
+                <Button
+                  variant="icon"
+                  className="mb-3 h-16 w-16 rounded-full bg-secondary hover:bg-secondary/80"
+                  aria-label={t`Change profile picture`}
                 >
-                  <Trash2Icon className="h-4 w-4 text-destructive" />
-                  <span className="text-destructive">
-                    <Trans>Remove profile picture</Trans>
-                  </span>
-                </MenuItem>
-              </>
-            )}
-          </Menu>
-        </MenuTrigger>
+                  {user.avatarUrl || avatarPreviewUrl ? (
+                    <img
+                      src={avatarPreviewUrl ?? user.avatarUrl ?? ""}
+                      className="h-full w-full rounded-full object-cover"
+                      alt={t`Preview avatar`}
+                    />
+                  ) : (
+                    <CameraIcon className="size-10 text-secondary-foreground" aria-label={t`Add profile picture`} />
+                  )}
+                </Button>
+                <Menu>
+                  <MenuItem
+                    onAction={() => {
+                      avatarFileInputRef.current?.click();
+                    }}
+                  >
+                    <CameraIcon className="h-4 w-4" />
+                    <Trans>Upload profile picture</Trans>
+                  </MenuItem>
+                  {(user.avatarUrl || avatarPreviewUrl) && (
+                    <>
+                      <MenuSeparator />
+                      <MenuItem
+                        onAction={() => {
+                          setAvatarMenuOpen(false);
+                          setRemoveAvatarFlag(true);
+                          setSelectedAvatarFile(null);
+                          setAvatarPreviewUrl(null);
+                          user.avatarUrl = null;
+                        }}
+                      >
+                        <Trash2Icon className="h-4 w-4 text-destructive" />
+                        <span className="text-destructive">
+                          <Trans>Remove profile picture</Trans>
+                        </span>
+                      </MenuItem>
+                    </>
+                  )}
+                </Menu>
+              </MenuTrigger>
 
-        <div className="flex flex-col gap-4 sm:flex-row">
-          <TextField
-            autoFocus={true}
-            isRequired={true}
-            name="firstName"
-            label={t`First name`}
-            defaultValue={user?.firstName}
-            placeholder={t`E.g. Alex`}
-            className="sm:w-64"
-          />
-          <TextField
-            isRequired={true}
-            name="lastName"
-            label={t`Last name`}
-            defaultValue={user?.lastName}
-            placeholder={t`E.g. Taylor`}
-            className="sm:w-64"
-          />
-        </div>
-        <TextField
-          label={t`Email`}
-          value={user?.email}
-          isDisabled={true}
-          startIcon={<MailIcon className="h-4 w-4" />}
-        />
-        <TextField name="title" label={t`Title`} defaultValue={user?.title} placeholder={t`E.g. Software engineer`} />
+              <div className="flex flex-col gap-4 sm:flex-row">
+                <TextField
+                  autoFocus={true}
+                  isRequired={true}
+                  name="firstName"
+                  label={t`First name`}
+                  defaultValue={user?.firstName}
+                  placeholder={t`E.g. Alex`}
+                  className="sm:w-64"
+                />
+                <TextField
+                  isRequired={true}
+                  name="lastName"
+                  label={t`Last name`}
+                  defaultValue={user?.lastName}
+                  placeholder={t`E.g. Taylor`}
+                  className="sm:w-64"
+                />
+              </div>
+              <TextField
+                label={t`Email`}
+                value={user?.email}
+                isDisabled={true}
+                startIcon={<MailIcon className="h-4 w-4" />}
+              />
+              <TextField
+                name="title"
+                label={t`Title`}
+                defaultValue={user?.title}
+                placeholder={t`E.g. Software engineer`}
+              />
+            </DialogContent>
 
-        <div className="mt-6 flex justify-end gap-4">
-          <Button
-            type="reset"
-            onPress={closeDialog}
-            variant="secondary"
-            isDisabled={isLoading || saveMutation.isPending}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-          <Button type="submit" isDisabled={isLoading || saveMutation.isPending}>
-            {saveMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
-          </Button>
-        </div>
-      </Form>
-    </Dialog>
+            <DialogFooter>
+              <Button
+                type="reset"
+                onPress={closeDialog}
+                variant="secondary"
+                isDisabled={isLoading || saveMutation.isPending}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+              <Button type="submit" isDisabled={isLoading || saveMutation.isPending}>
+                {saveMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
+              </Button>
+            </DialogFooter>
+          </Form>
+        </Dialog>
+      )}
+    </Modal>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/account/-components/DeleteAccountConfirmation.tsx b/application/account-management/WebApp/routes/admin/account/-components/DeleteAccountConfirmation.tsx
index 0b98fde39..a416d3c27 100644
--- a/application/account-management/WebApp/routes/admin/account/-components/DeleteAccountConfirmation.tsx
+++ b/application/account-management/WebApp/routes/admin/account/-components/DeleteAccountConfirmation.tsx
@@ -1,6 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog } 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";
@@ -13,15 +14,16 @@ type DeleteAccountConfirmationProps = {
 export default function DeleteAccountConfirmation({ isOpen, onOpenChange }: Readonly<DeleteAccountConfirmationProps>) {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} 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`Delete account`}
-            </Heading>
-            <p className="text-muted-foreground text-sm">{t`To delete your account, please contact our support team.`}</p>
-            <div className="mt-4 flex flex-col gap-4">
+            <DialogHeader description={t`To delete your account, please contact our support team.`}>
+              <Heading slot="title" className="text-2xl">
+                {t`Delete account`}
+              </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">
@@ -29,10 +31,10 @@ export default function DeleteAccountConfirmation({ isOpen, onOpenChange }: Read
                 </a>
               </div>
               <p className="text-muted-foreground text-sm">{t`Our support team will assist you with the account deletion process and ensure all your data is properly removed.`}</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>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
index fbf60fc6f..738311858 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
@@ -4,6 +4,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AlertDialog } from "@repo/ui/components/AlertDialog";
 import { Button } from "@repo/ui/components/Button";
+import { DialogContent, DialogFooter } from "@repo/ui/components/DialogFooter";
 import { Modal } from "@repo/ui/components/Modal";
 import { Select, SelectItem } from "@repo/ui/components/Select";
 import { toastQueue } from "@repo/ui/components/Toast";
@@ -54,36 +55,40 @@ export function ChangeUserRoleDialog({ user, isOpen, onOpenChange }: Readonly<Ch
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} blur={false} isDismissable={true}>
       <AlertDialog title={t`Change user role`}>
-        <p className="text-muted-foreground text-sm">
-          <Trans>
-            Select a new role for{" "}
-            <b>{user ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email : ""}</b>
-          </Trans>
-        </p>
+        <div className="flex flex-col max-sm:h-full">
+          <DialogContent>
+            <p className="text-muted-foreground text-sm">
+              <Trans>
+                Select a new role for{" "}
+                <b>{user ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email : ""}</b>
+              </Trans>
+            </p>
 
-        <div className="mt-4 flex flex-col gap-4">
-          <Select
-            autoFocus={true}
-            aria-label={t`User role`}
-            selectedKey={selectedRole || user?.role}
-            onSelectionChange={(key) => setSelectedRole(key as UserRole)}
-            className="flex w-full flex-col"
-          >
-            {Object.values(UserRole).map((userRole) => (
-              <SelectItem id={userRole} key={userRole}>
-                {getUserRoleLabel(userRole)}
-              </SelectItem>
-            ))}
-          </Select>
+            <div className="mt-4">
+              <Select
+                autoFocus={true}
+                aria-label={t`User role`}
+                selectedKey={selectedRole || user?.role}
+                onSelectionChange={(key) => setSelectedRole(key as UserRole)}
+                className="flex w-full flex-col"
+              >
+                {Object.values(UserRole).map((userRole) => (
+                  <SelectItem id={userRole} key={userRole}>
+                    {getUserRoleLabel(userRole)}
+                  </SelectItem>
+                ))}
+              </Select>
+            </div>
+          </DialogContent>
 
-          <div className="mt-4 flex justify-end gap-4">
+          <DialogFooter>
             <Button variant="outline" onPress={handleCancel}>
               {t`Cancel`}
             </Button>
             <Button variant="primary" onPress={handleConfirm} isDisabled={!selectedRole || selectedRole === user?.role}>
               {t`OK`}
             </Button>
-          </div>
+          </DialogFooter>
         </div>
       </AlertDialog>
     </Modal>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
index 65674d353..068f0c06e 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
@@ -3,6 +3,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog } from "@repo/ui/components/Dialog";
+import { DialogContent, DialogFooter, DialogHeader } from "@repo/ui/components/DialogFooter";
 import { Form } from "@repo/ui/components/Form";
 import { Heading } from "@repo/ui/components/Heading";
 import { Modal } from "@repo/ui/components/Modal";
@@ -34,29 +35,33 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
       <Dialog>
-        <XIcon onClick={() => onOpenChange(false)} className="absolute top-2 right-2 h-10 w-10 p-2 hover:bg-muted" />
-        <Heading slot="title" className="text-2xl">
-          <Trans>Invite user</Trans>
-        </Heading>
-        <p className="text-muted-foreground text-sm">
-          <Trans>An email with login instructions will be sent to the user.</Trans>
-        </p>
+        <XIcon
+          onClick={() => onOpenChange(false)}
+          className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted"
+        />
+        <DialogHeader description={<Trans>An email with login instructions will be sent to the user.</Trans>}>
+          <Heading slot="title" className="text-2xl">
+            <Trans>Invite user</Trans>
+          </Heading>
+        </DialogHeader>
 
         <Form
           onSubmit={mutationSubmitter(inviteUserMutation)}
           validationErrors={inviteUserMutation.error?.errors}
           validationBehavior="aria"
-          className="mt-4 flex flex-col gap-4"
+          className="flex flex-col max-sm:h-full"
         >
-          <TextField
-            autoFocus={true}
-            isRequired={true}
-            name="email"
-            label={t`Email`}
-            placeholder={t`user@email.com`}
-            className="flex-grow"
-          />
-          <div className="mt-6 flex justify-end gap-4">
+          <DialogContent className="flex flex-col gap-4">
+            <TextField
+              autoFocus={true}
+              isRequired={true}
+              name="email"
+              label={t`Email`}
+              placeholder={t`user@email.com`}
+              className="flex-grow"
+            />
+          </DialogContent>
+          <DialogFooter>
             <Button
               type="reset"
               onPress={() => onOpenChange(false)}
@@ -68,7 +73,7 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
             <Button type="submit" isDisabled={inviteUserMutation.isPending}>
               <Trans>Send invite</Trans>
             </Button>
-          </div>
+          </DialogFooter>
         </Form>
       </Dialog>
     </Modal>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index e2348a7fd..52d395c0d 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -7,6 +7,7 @@ import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
 import { DateRangePicker } from "@repo/ui/components/DateRangePicker";
 import { Dialog } 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 { SearchField } from "@repo/ui/components/SearchField";
@@ -442,11 +443,13 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
             onClick={() => setIsFilterPanelOpen(false)}
             className="absolute top-2 right-2 h-10 w-10 p-2 hover:bg-muted"
           />
-          <Heading slot="title" className="text-2xl">
-            <Trans>Filters</Trans>
-          </Heading>
+          <DialogHeader>
+            <Heading slot="title" className="text-2xl">
+              <Trans>Filters</Trans>
+            </Heading>
+          </DialogHeader>
 
-          <div className="mt-4 flex flex-col gap-4">
+          <DialogContent className="flex flex-col gap-4">
             <SearchField
               placeholder={t`Search`}
               value={search}
@@ -512,9 +515,9 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
               placeholder={t`Select dates`}
               className="w-full"
             />
-          </div>
+          </DialogContent>
 
-          <div className="mt-6 flex justify-end gap-4">
+          <DialogFooter>
             <Button
               variant="secondary"
               onPress={clearAllFilters}
@@ -525,7 +528,7 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
             <Button variant="primary" onPress={() => setIsFilterPanelOpen(false)}>
               <Trans>OK</Trans>
             </Button>
-          </div>
+          </DialogFooter>
         </Dialog>
       </Modal>
     </div>

From 6cb06ad8256db381168c44b4bfd18c0e9184cabe Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 02:08:02 +0200
Subject: [PATCH 09/37] Make toast messages full width on mobile screens

---
 application/shared-webapp/ui/components/Toast.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/application/shared-webapp/ui/components/Toast.tsx b/application/shared-webapp/ui/components/Toast.tsx
index f89e3d223..3f20847af 100644
--- a/application/shared-webapp/ui/components/Toast.tsx
+++ b/application/shared-webapp/ui/components/Toast.tsx
@@ -135,7 +135,7 @@ function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<Toas
     <div
       {...regionProps}
       ref={ref}
-      className="pointer-events-none fixed top-4 right-4 z-[100] flex max-h-screen w-full max-w-[420px] flex-col gap-1"
+      className="pointer-events-none fixed top-0 right-0 left-0 z-[100] flex max-h-screen w-full flex-col gap-1 p-1 sm:top-4 sm:right-4 sm:left-auto sm:max-w-[420px] sm:p-0"
     >
       {state.visibleToasts.map((toast) => (
         <Toast key={toast.key} toast={toast} state={state} />
@@ -145,7 +145,7 @@ function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<Toas
 }
 
 const toastStyle = tv({
-  base: "group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
+  base: "group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-none border border-x-0 border-t-0 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none sm:rounded-md sm:border",
   variants: {
     variant: {
       info: "bg-info text-info-foreground",

From ef8cc5777667255426a95986956d9f8792569120 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 02:14:20 +0200
Subject: [PATCH 10/37] Make pagination sticky at bottom on mobile devices

---
 .../WebApp/routes/admin/users/-components/UserTable.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 1641bdb12..dd37dd76f 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -321,7 +321,7 @@ export function UserTable({
       </div>
 
       {users && (
-        <div className="bg-background py-4">
+        <div className="bg-background py-4 max-sm:sticky max-sm:bottom-0 max-sm:border-border max-sm:border-t">
           <Pagination
             paginationSize={5}
             currentPage={currentPage}

From ae4c408ac90700afe4ef56e2437b10b2ee64326d Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 02:23:41 +0200
Subject: [PATCH 11/37] Add PWA support and native mobile app feel

---
 application/AppGateway/appsettings.json       | 16 ++++++++++++
 .../WebApp/public/index.html                  |  7 ++++-
 .../WebApp/public/manifest.json               | 22 ++++++++++++++++
 .../back-office/WebApp/public/index.html      |  8 +++++-
 application/shared-webapp/ui/tailwind.css     | 26 +++++++++++++++++++
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 application/account-management/WebApp/public/manifest.json

diff --git a/application/AppGateway/appsettings.json b/application/AppGateway/appsettings.json
index c1f5ca5e9..bc3966aca 100644
--- a/application/AppGateway/appsettings.json
+++ b/application/AppGateway/appsettings.json
@@ -39,6 +39,22 @@
           }
         ]
       },
+      "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": {
diff --git a/application/account-management/WebApp/public/index.html b/application/account-management/WebApp/public/index.html
index 6548a3dfb..f0d4fc36e 100644
--- a/application/account-management/WebApp/public/index.html
+++ b/application/account-management/WebApp/public/index.html
@@ -3,10 +3,15 @@
 <head>
     <meta charset="UTF-8" />
     <meta content="nofollow" name="robots" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
     <title>PlatformPlatform</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
+    <link rel="manifest" href="/manifest.json">
 </head>
 <body>
 <div id="root"></div>
diff --git a/application/account-management/WebApp/public/manifest.json b/application/account-management/WebApp/public/manifest.json
new file mode 100644
index 000000000..4d8248635
--- /dev/null
+++ b/application/account-management/WebApp/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "PlatformPlatform",
+  "short_name": "PlatformPlatform",
+  "description": "PlatformPlatform Application",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/application/back-office/WebApp/public/index.html b/application/back-office/WebApp/public/index.html
index bba1186a5..03b86ba28 100644
--- a/application/back-office/WebApp/public/index.html
+++ b/application/back-office/WebApp/public/index.html
@@ -3,10 +3,16 @@
 <head>
     <meta charset="UTF-8" />
     <meta content="nofollow" name="robots" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <title>PlatformPlatform - Back Office</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
     <title>PlatformPlatform - Back Office</title>
+    <link rel="manifest" href="/manifest.json">
 </head>
 <body>
 <div id="root"></div>
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index c1494dd10..a5538d557 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -158,8 +158,34 @@ body,
   padding: 0;
   margin: 0;
   overflow: hidden;
+  /* Prevent bounce scrolling on iOS */
+  position: fixed;
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 #root {
   overflow: auto;
+  /* Ensure full height on iOS */
+  height: 100vh;
+  height: -webkit-fill-available;
+}
+
+/* Prevent text selection on UI elements for app-like feel */
+@media (max-width: 640px) {
+  button,
+  [role="button"],
+  .menu-item,
+  label {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Improve tap responsiveness */
+  a,
+  button,
+  [role="button"] {
+    -webkit-tap-highlight-color: transparent;
+  }
 }

From 9135ee1d049069304187781da25a98aa065d83d7 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 10:07:44 +0200
Subject: [PATCH 12/37] Make hamburger menu button fixed position on mobile

---
 application/shared-webapp/ui/components/SideMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index f62b7fa7b..7134e034c 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -982,10 +982,10 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
   return (
     <>
       {!isOpen && (
-        <div className="absolute right-2 bottom-3 z-30 sm:hidden">
+        <div className="fixed right-2 bottom-3 z-30 sm:hidden">
           <Button
             aria-label={ariaLabel}
-            className="m-0 inline-flex h-12 w-12 shrink-0 items-center justify-center border-0 bg-background pressed:bg-muted p-0 hover:bg-hover-background focus:bg-hover-background"
+            className="m-0 inline-flex h-12 w-12 shrink-0 items-center justify-center border-0 bg-background pressed:bg-muted p-0 shadow-lg hover:bg-hover-background focus:bg-hover-background"
             onPress={() => setIsOpen(true)}
           >
             <Menu className="h-7 w-7 text-foreground" />

From 0fde028907aad310f764e6a3757f1865e90568b6 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 12:10:26 +0200
Subject: [PATCH 13/37] Fix scrollbar always visible on mobile devices

---
 application/shared-webapp/ui/tailwind.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index a5538d557..2a1480d1e 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -120,7 +120,7 @@
     font-synthesis: none;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     scroll-behavior: smooth;
     touch-action: manipulation;
   }

From 995fb9b791c617d9655675c2e274d1744fbff73d Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 18:53:42 +0200
Subject: [PATCH 14/37] Fix screen position to prevent bouncing on both mobile
 and desktop screens

---
 .../admin/users/-components/UserTable.tsx     | 248 +++++++++---------
 .../WebApp/routes/admin/users/index.tsx       |  20 +-
 .../shared-webapp/ui/components/AppLayout.tsx |  17 +-
 application/shared-webapp/ui/tailwind.css     |  23 +-
 4 files changed, 159 insertions(+), 149 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index dd37dd76f..963797ba8 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -194,134 +194,132 @@ export function UserTable({
   const isSmallScreen = typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.md).matches;
 
   return (
-    <div className="flex h-full flex-col">
-      <div className="min-h-0 flex-1">
-        <Table
-          key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
-          selectionMode={isSmallScreen ? "single" : "multiple"}
-          selectionBehavior="replace"
-          selectedKeys={new Set(selectedUsers.map((user) => user.id))}
-          onSelectionChange={handleSelectionChange}
-          sortDescriptor={sortDescriptor}
-          onSortChange={handleSortChange}
-          aria-label={t`Users`}
-        >
-          <TableHeader>
-            <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
-              <Trans>Name</Trans>
-            </Column>
-            <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
-              <Trans>Email</Trans>
-            </Column>
-            <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
-              <Trans>Created</Trans>
-            </Column>
-            <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
-              <Trans>Modified</Trans>
-            </Column>
-            <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
-              <Trans>Role</Trans>
-            </Column>
-            <Column width={100}>
-              <Trans>Actions</Trans>
-            </Column>
-          </TableHeader>
-          <TableBody>
-            {users?.users.map((user) => (
-              <Row key={user.id} id={user.id}>
-                <Cell>
-                  <Text className="flex h-14 w-full items-center justify-start gap-2 p-0 text-left font-normal">
-                    <Avatar
-                      initials={getInitials(user.firstName, user.lastName, user.email)}
-                      avatarUrl={user.avatarUrl}
-                      size="sm"
-                      isRound={true}
-                    />
-                    <Text className="flex flex-col truncate">
-                      <Text className="truncate text-foreground">
-                        {user.firstName} {user.lastName}
-                        {user.emailConfirmed ? (
-                          ""
-                        ) : (
-                          <Badge variant="outline">
-                            <Trans>Pending</Trans>
-                          </Badge>
-                        )}
-                      </Text>
-                      <Text className="truncate">{user.title ?? ""}</Text>
+    <>
+      <Table
+        key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
+        selectionMode={isSmallScreen ? "single" : "multiple"}
+        selectionBehavior="replace"
+        selectedKeys={new Set(selectedUsers.map((user) => user.id))}
+        onSelectionChange={handleSelectionChange}
+        sortDescriptor={sortDescriptor}
+        onSortChange={handleSortChange}
+        aria-label={t`Users`}
+      >
+        <TableHeader>
+          <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
+            <Trans>Name</Trans>
+          </Column>
+          <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
+            <Trans>Email</Trans>
+          </Column>
+          <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
+            <Trans>Created</Trans>
+          </Column>
+          <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
+            <Trans>Modified</Trans>
+          </Column>
+          <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
+            <Trans>Role</Trans>
+          </Column>
+          <Column width={100}>
+            <Trans>Actions</Trans>
+          </Column>
+        </TableHeader>
+        <TableBody>
+          {users?.users.map((user) => (
+            <Row key={user.id} id={user.id}>
+              <Cell>
+                <Text className="flex h-14 w-full items-center justify-start gap-2 p-0 text-left font-normal">
+                  <Avatar
+                    initials={getInitials(user.firstName, user.lastName, user.email)}
+                    avatarUrl={user.avatarUrl}
+                    size="sm"
+                    isRound={true}
+                  />
+                  <Text className="flex flex-col truncate">
+                    <Text className="truncate text-foreground">
+                      {user.firstName} {user.lastName}
+                      {user.emailConfirmed ? (
+                        ""
+                      ) : (
+                        <Badge variant="outline">
+                          <Trans>Pending</Trans>
+                        </Badge>
+                      )}
                     </Text>
+                    <Text className="truncate">{user.title ?? ""}</Text>
                   </Text>
-                </Cell>
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
-                </Cell>
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                    {formatDate(user.createdAt)}
-                  </Text>
-                </Cell>
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                    {formatDate(user.modifiedAt)}
-                  </Text>
-                </Cell>
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                    <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
-                  </Text>
-                </Cell>
-                <Cell>
-                  <Text className="flex w-full justify-end">
-                    <MenuTrigger
-                      onOpenChange={(isOpen) => {
-                        if (isOpen) {
-                          onSelectedUsersChange([user]);
-                        }
-                      }}
-                    >
-                      <Button variant="icon" aria-label={t`User actions`}>
-                        <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
-                      </Button>
-                      <Menu>
-                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
-                          <UserIcon className="h-4 w-4" />
-                          <Trans>View profile</Trans>
-                        </MenuItem>
-                        {userInfo?.role === "Owner" && (
-                          <>
-                            <MenuItem
-                              id="changeRole"
-                              isDisabled={user.id === userInfo?.id}
-                              onAction={() => onChangeRole(user)}
-                            >
-                              <SettingsIcon className="h-4 w-4" />
-                              <Trans>Change role</Trans>
-                            </MenuItem>
-                            <MenuSeparator />
-                            <MenuItem
-                              id="deleteUser"
-                              isDisabled={user.id === userInfo?.id}
-                              onAction={() => onDeleteUser(user)}
-                            >
-                              <Trash2Icon className="h-4 w-4 text-destructive" />
-                              <span className="text-destructive">
-                                <Trans>Delete</Trans>
-                              </span>
-                            </MenuItem>
-                          </>
-                        )}
-                      </Menu>
-                    </MenuTrigger>
-                  </Text>
-                </Cell>
-              </Row>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+                </Text>
+              </Cell>
+              <Cell>
+                <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
+              </Cell>
+              <Cell>
+                <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                  {formatDate(user.createdAt)}
+                </Text>
+              </Cell>
+              <Cell>
+                <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                  {formatDate(user.modifiedAt)}
+                </Text>
+              </Cell>
+              <Cell>
+                <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                  <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
+                </Text>
+              </Cell>
+              <Cell>
+                <Text className="flex w-full justify-end">
+                  <MenuTrigger
+                    onOpenChange={(isOpen) => {
+                      if (isOpen) {
+                        onSelectedUsersChange([user]);
+                      }
+                    }}
+                  >
+                    <Button variant="icon" aria-label={t`User actions`}>
+                      <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
+                    </Button>
+                    <Menu>
+                      <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
+                        <UserIcon className="h-4 w-4" />
+                        <Trans>View profile</Trans>
+                      </MenuItem>
+                      {userInfo?.role === "Owner" && (
+                        <>
+                          <MenuItem
+                            id="changeRole"
+                            isDisabled={user.id === userInfo?.id}
+                            onAction={() => onChangeRole(user)}
+                          >
+                            <SettingsIcon className="h-4 w-4" />
+                            <Trans>Change role</Trans>
+                          </MenuItem>
+                          <MenuSeparator />
+                          <MenuItem
+                            id="deleteUser"
+                            isDisabled={user.id === userInfo?.id}
+                            onAction={() => onDeleteUser(user)}
+                          >
+                            <Trash2Icon className="h-4 w-4 text-destructive" />
+                            <span className="text-destructive">
+                              <Trans>Delete</Trans>
+                            </span>
+                          </MenuItem>
+                        </>
+                      )}
+                    </Menu>
+                  </MenuTrigger>
+                </Text>
+              </Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
 
       {users && (
-        <div className="bg-background py-4 max-sm:sticky max-sm:bottom-0 max-sm:border-border max-sm:border-t">
+        <div className="bg-background pt-4 max-sm:sticky max-sm:bottom-0 max-sm:border-border max-sm:border-t">
           <Pagination
             paginationSize={5}
             currentPage={currentPage}
@@ -340,6 +338,6 @@ export function UserTable({
           />
         </div>
       )}
-    </div>
+    </>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index cd2f6f731..a8849f39f 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -141,7 +141,7 @@ export default function UsersPage() {
           </TopMenu>
         }
       >
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-[500px] flex-col">
           <h1>
             <Trans>Users</Trans>
           </h1>
@@ -152,16 +152,14 @@ export default function UsersPage() {
           <div className="mb-4">
             <UserToolbar selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
           </div>
-          <div className="min-h-0 flex-1">
-            <UserTable
-              selectedUsers={selectedUsers}
-              onSelectedUsersChange={setSelectedUsers}
-              onViewProfile={handleViewProfile}
-              onDeleteUser={handleDeleteUser}
-              onChangeRole={handleChangeRole}
-              onUsersLoaded={handleUsersLoaded}
-            />
-          </div>
+          <UserTable
+            selectedUsers={selectedUsers}
+            onSelectedUsersChange={setSelectedUsers}
+            onViewProfile={handleViewProfile}
+            onDeleteUser={handleDeleteUser}
+            onChangeRole={handleChangeRole}
+            onUsersLoaded={handleUsersLoaded}
+          />
         </div>
       </AppLayout>
 
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index a7c42e59a..c55083c3f 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -10,6 +10,7 @@ type AppLayoutProps = {
   variant?: AppLayoutVariant;
   maxWidth?: string;
   sidePane?: React.ReactNode;
+  paddingBottom?: string;
 };
 
 /**
@@ -52,7 +53,7 @@ export function AppLayout({
   }, [isOverlayOpen]);
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       {/* Skip navigation link for keyboard users */}
       <a
         href="#main-content"
@@ -61,7 +62,7 @@ export function AppLayout({
         Skip to main content
       </a>
       <div
-        className={`${className} ${sidePane ? "grid grid-cols-[1fr_384px] sm:grid" : "flex flex-col"} h-screen`}
+        className={`${className} ${sidePane ? "grid grid-cols-[1fr_384px] sm:grid" : "flex flex-col"} h-full overflow-hidden`}
         style={style}
       >
         {/* Fixed TopMenu with blur effect - contains breadcrumbs and secondary functions */}
@@ -77,9 +78,13 @@ export function AppLayout({
 
         {/* Main content area */}
         <main
-          className={`flex h-full min-h-[600px] w-full flex-1 flex-col px-4 pt-4 transition-all duration-100 ease-in-out sm:pt-28 ${
-            sidePane ? "overflow-x-auto" : ""
-          }`}
+          className={
+            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pb-4 transition-all duration-100 ease-in-out sm:pt-28"
+          }
+          style={{
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "none"
+          }}
           id="main-content"
           aria-label="Main content"
           tabIndex={-1}
@@ -105,6 +110,6 @@ export function AppLayout({
           </aside>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index 2a1480d1e..48ec4db48 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -150,9 +150,14 @@
   }
 }
 
-html,
-body,
-#root {
+html {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
   height: 100%;
   width: 100%;
   padding: 0;
@@ -165,10 +170,14 @@ body,
 }
 
 #root {
-  overflow: auto;
-  /* Ensure full height on iOS */
-  height: 100vh;
-  height: -webkit-fill-available;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Prevent text selection on UI elements for app-like feel */

From 228cf08a92cf9cc466a6799c38e911fe6b45cc33 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 19:36:11 +0200
Subject: [PATCH 15/37] Fix mobile UI spacing and safe area handling for iOS
 devices

---
 .../federated-modules/sideMenu/MobileMenu.tsx |  2 +-
 .../admin/users/-components/UserTable.tsx     |  2 +-
 .../shared-webapp/ui/components/AppLayout.tsx |  2 +-
 .../ui/components/DialogFooter.tsx            |  2 ++
 .../shared-webapp/ui/components/SideMenu.tsx  | 24 ++++++++++++-------
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
index 5724d0b66..bf8713e0d 100644
--- a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
+++ b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
@@ -150,7 +150,7 @@ export function MobileMenu({
         <div className="mx-3 my-5 border-border border-b" />
 
         {/* Navigation Section for Mobile */}
-        <div className="flex flex-col gap-3 pb-20">
+        <div className="flex flex-col gap-3">
           <SideMenuSeparator>
             <Trans>Navigation</Trans>
           </SideMenuSeparator>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 963797ba8..82acad04a 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -325,7 +325,7 @@ export function UserTable({
             currentPage={currentPage}
             totalPages={users.totalPages ?? 1}
             onPageChange={handlePageChange}
-            className="w-full pr-12 sm:hidden"
+            className="w-full pr-20 sm:hidden"
           />
           <Pagination
             paginationSize={9}
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index c55083c3f..bed270629 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -79,7 +79,7 @@ export function AppLayout({
         {/* Main content area */}
         <main
           className={
-            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pb-4 transition-all duration-100 ease-in-out sm:pt-28"
+            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pb-4 transition-all duration-100 ease-in-out supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))] sm:pt-28"
           }
           style={{
             WebkitOverflowScrolling: "touch",
diff --git a/application/shared-webapp/ui/components/DialogFooter.tsx b/application/shared-webapp/ui/components/DialogFooter.tsx
index e77fb5963..b16fd3c82 100644
--- a/application/shared-webapp/ui/components/DialogFooter.tsx
+++ b/application/shared-webapp/ui/components/DialogFooter.tsx
@@ -18,6 +18,7 @@ export function DialogFooter({ children, className }: Readonly<DialogFooterProps
       className={twMerge(
         "mt-8 flex justify-end gap-4",
         "max-sm:fixed max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:mt-0 max-sm:border-border max-sm:border-t max-sm:bg-background max-sm:p-4 max-sm:shadow-lg",
+        "max-sm:supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))]",
         className
       )}
     >
@@ -41,6 +42,7 @@ export function DialogContent({ children, className }: Readonly<{ children: Reac
       className={twMerge(
         "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
         "max-sm:pb-20", // Add padding to account for fixed footer on mobile
+        "max-sm:supports-[padding:max(0px)]:pb-[calc(5rem+env(safe-area-inset-bottom))]", // Adjust for safe area
         "-webkit-overflow-scrolling-touch",
         "max-sm:-mx-6 max-sm:px-6", // Extend scrollbar to edge while maintaining content padding
         className
diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index 7134e034c..ddac881e1 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -982,10 +982,10 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
   return (
     <>
       {!isOpen && (
-        <div className="fixed right-2 bottom-3 z-30 sm:hidden">
+        <div className="fixed right-4 bottom-4 z-30 supports-[bottom:max(0px)]:bottom-[max(0.75rem,calc(env(safe-area-inset-bottom)-0.25rem))] sm:hidden">
           <Button
             aria-label={ariaLabel}
-            className="m-0 inline-flex h-12 w-12 shrink-0 items-center justify-center border-0 bg-background pressed:bg-muted p-0 shadow-lg hover:bg-hover-background focus:bg-hover-background"
+            className="m-0 inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-border bg-background pressed:bg-muted p-0 shadow-lg hover:bg-hover-background focus:bg-hover-background"
             onPress={() => setIsOpen(true)}
           >
             <Menu className="h-7 w-7 text-foreground" />
@@ -995,8 +995,8 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
       {isOpen && (
         <overlayContext.Provider value={{ isOpen, close: () => setIsOpen(false) }}>
           <dialog
-            className="fixed inset-0 z-[200] h-[100vh] w-[100vw] bg-background"
-            style={{ margin: 0, padding: 0, border: "none", top: 0, left: 0, right: 0, bottom: 0, display: "flex" }}
+            className="fixed inset-0 z-[200] h-full w-full bg-background"
+            style={{ margin: 0, padding: 0, border: "none", display: "flex" }}
             aria-label="Mobile navigation menu"
             open={true}
           >
@@ -1007,14 +1007,20 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
               aria-label="Mobile navigation"
             >
               <div
-                className="flex-1 overflow-y-auto overflow-x-hidden px-3"
-                style={{ margin: 0, padding: "0 12px", pointerEvents: "auto", WebkitOverflowScrolling: "touch" }}
+                className="flex-1 overflow-y-auto overflow-x-hidden px-3 pb-20 supports-[padding:max(0px)]:pb-[max(5rem,env(safe-area-inset-bottom))]"
+                style={{
+                  margin: 0,
+                  paddingLeft: "12px",
+                  paddingRight: "12px",
+                  pointerEvents: "auto",
+                  WebkitOverflowScrolling: "touch"
+                }}
               >
-                {topMenuContent && <div className="pt-5 pb-20">{topMenuContent}</div>}
+                {topMenuContent && <div className="pt-5">{topMenuContent}</div>}
               </div>
 
               {/* Floating close button at bottom right - same position as hamburger */}
-              <div className="absolute right-2 bottom-3 z-10">
+              <div className="absolute right-4 bottom-4 z-10 supports-[bottom:max(0px)]:bottom-[max(0.75rem,calc(env(safe-area-inset-bottom)-0.25rem))]">
                 <Button
                   variant="ghost"
                   size="icon"
@@ -1022,7 +1028,7 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
                   aria-label="Close menu"
                   className="h-12 w-12 rounded-full border border-border bg-background/80 shadow-lg backdrop-blur-sm hover:bg-background/90"
                 >
-                  <X className="h-7 w-7" />
+                  <X className="h-5 w-5" />
                 </Button>
               </div>
             </nav>

From 0e90cc76f101d9adc6affc8e30906e97cf50cf66 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 21:13:23 +0200
Subject: [PATCH 16/37] Fix safe area padding for iPad devices in
 UserProfileSidePane

---
 .../routes/admin/users/-components/UserProfileSidePane.tsx      | 2 +-
 application/shared-webapp/ui/components/AppLayout.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
index 9a9dad309..c838012b7 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -326,7 +326,7 @@ export function UserProfileSidePane({
 
         {/* Quick Actions */}
         {userInfo?.role === "Owner" && user && (
-          <div className="p-4">
+          <div className="relative mt-auto border-border border-t bg-background p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
             <Button
               variant="destructive"
               onPress={() => onDeleteUser(user)}
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index bed270629..5dfa887e8 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -103,7 +103,7 @@ export function AppLayout({
         {/* Side pane area - responsive behavior */}
         {sidePane && (
           <aside
-            className="fixed inset-0 z-[60] md:inset-auto md:top-[72px] md:right-0 md:h-[calc(100vh-72px)] md:w-96"
+            className="fixed inset-0 z-[60] md:inset-auto md:top-[72px] md:right-0 md:bottom-0 md:w-96"
             aria-label="Side panel"
           >
             {sidePane}

From 099aea9648aff31c646db9f36f63a8de4d8a20d7 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 21:23:03 +0200
Subject: [PATCH 17/37] Fix background scrolling by applying fixed positioning
 to html element

---
 application/shared-webapp/ui/tailwind.css | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index 48ec4db48..44fefc08e 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -119,8 +119,7 @@
     -webkit-font-smoothing: antialiased;
     font-synthesis: none;
     height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
     scroll-behavior: smooth;
     touch-action: manipulation;
   }
@@ -155,6 +154,13 @@ html {
   width: 100%;
   padding: 0;
   margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
 }
 
 body {
@@ -163,8 +169,11 @@ body {
   padding: 0;
   margin: 0;
   overflow: hidden;
-  /* Prevent bounce scrolling on iOS */
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
 }

From c6fff0de09954dda4bb68aa36445b75a7c42d224 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 21:38:50 +0200
Subject: [PATCH 18/37] Fix touch device detection to use single selection mode
 on iPads

---
 .../WebApp/routes/admin/users/-components/UserTable.tsx    | 7 ++++---
 application/shared-webapp/ui/utils/responsive.ts           | 5 +++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 82acad04a..3711f6963 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -10,7 +10,7 @@ import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Pagination } from "@repo/ui/components/Pagination";
 import { Cell, Column, Row, Table, TableHeader } from "@repo/ui/components/Table";
 import { Text } from "@repo/ui/components/Text";
-import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
+import { MEDIA_QUERIES, isTouchDevice } from "@repo/ui/utils/responsive";
 import { formatDate } from "@repo/utils/date/formatDate";
 import { getInitials } from "@repo/utils/string/getInitials";
 import { useNavigate, useSearch } from "@tanstack/react-router";
@@ -149,7 +149,7 @@ export function UserTable({
       }
 
       // Single user selected - check if we should auto-open profile
-      const isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
+      const isSmallScreen = isTouchDevice() || !window.matchMedia(MEDIA_QUERIES.md).matches;
       const shouldAutoOpen = !isSmallScreen || !isKeyboardNavigation;
 
       if (shouldAutoOpen) {
@@ -191,7 +191,8 @@ export function UserTable({
   }
 
   const currentPage = (users?.currentPageOffset ?? 0) + 1;
-  const isSmallScreen = typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.md).matches;
+  // Use single selection on touch devices regardless of screen size
+  const isSmallScreen = isTouchDevice() || !window.matchMedia(MEDIA_QUERIES.md).matches;
 
   return (
     <>
diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts
index 06f597ac9..879fd60eb 100644
--- a/application/shared-webapp/ui/utils/responsive.ts
+++ b/application/shared-webapp/ui/utils/responsive.ts
@@ -24,3 +24,8 @@ export const SIDE_MENU_COLLAPSED_WIDTH = 72;
 export const SIDE_MENU_MIN_WIDTH = 150;
 export const SIDE_MENU_MAX_WIDTH = 300;
 export const SIDE_MENU_DEFAULT_WIDTH = 288;
+
+// Helper function to detect touch devices (including iPads)
+export function isTouchDevice(): boolean {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}

From 189796d6cded30ed3d8e2d31d4b04f17bfcfb0dc Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 14:48:39 +0200
Subject: [PATCH 19/37] Add theme-color meta tags for iOS Dynamic Island
 background

---
 .../account-management/WebApp/public/index.html  |  2 ++
 application/back-office/WebApp/public/index.html |  2 ++
 application/shared-webapp/ui/theme/mode/utils.ts | 16 ++++++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/application/account-management/WebApp/public/index.html b/application/account-management/WebApp/public/index.html
index f0d4fc36e..62426527b 100644
--- a/application/account-management/WebApp/public/index.html
+++ b/application/account-management/WebApp/public/index.html
@@ -8,6 +8,8 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
+    <meta name="theme-color" content="#eef0f2" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#151b23" media="(prefers-color-scheme: dark)" />
     <title>PlatformPlatform</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
diff --git a/application/back-office/WebApp/public/index.html b/application/back-office/WebApp/public/index.html
index 03b86ba28..8ccf47a50 100644
--- a/application/back-office/WebApp/public/index.html
+++ b/application/back-office/WebApp/public/index.html
@@ -8,6 +8,8 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
+    <meta name="theme-color" content="#eef0f2" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#151b23" media="(prefers-color-scheme: dark)" />
     <title>PlatformPlatform - Back Office</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
diff --git a/application/shared-webapp/ui/theme/mode/utils.ts b/application/shared-webapp/ui/theme/mode/utils.ts
index 6f7d9a710..6b393a0d9 100644
--- a/application/shared-webapp/ui/theme/mode/utils.ts
+++ b/application/shared-webapp/ui/theme/mode/utils.ts
@@ -31,8 +31,24 @@ export const setClassNameThemeMode = (mode: ThemeMode) => {
   if (mode === ThemeMode.Dark || mode === ThemeMode.Light) {
     document.documentElement.classList.add(mode);
     document.documentElement.style.colorScheme = mode;
+
+    // Update theme-color meta tag for Dynamic Island
+    const themeColorMeta = document.querySelector('meta[name="theme-color"]:not([media])') as HTMLMetaElement;
+    if (themeColorMeta) {
+      themeColorMeta.content = mode === ThemeMode.Dark ? "#151b23" : "#eef0f2";
+    } else {
+      const meta = document.createElement("meta");
+      meta.name = "theme-color";
+      meta.content = mode === ThemeMode.Dark ? "#151b23" : "#eef0f2";
+      document.head.appendChild(meta);
+    }
   } else {
     document.documentElement.style.removeProperty("color-scheme");
+    // Remove non-media theme-color when in system mode
+    const themeColorMeta = document.querySelector('meta[name="theme-color"]:not([media])') as HTMLMetaElement;
+    if (themeColorMeta) {
+      themeColorMeta.remove();
+    }
   }
 };
 

From ea77fe986c0b691f996386db7c9ba00532972f5e Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 22:17:55 +0200
Subject: [PATCH 20/37] Make theme color dynamically update from CSS variables

---
 .../common/ThemeModeSelector.tsx               | 18 ++++++++++++++++++
 .../WebApp/public/index.html                   |  3 +--
 .../back-office/WebApp/public/index.html       |  3 +--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx b/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx
index e4879032e..529f77ed4 100644
--- a/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx
+++ b/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 }));
 
diff --git a/application/account-management/WebApp/public/index.html b/application/account-management/WebApp/public/index.html
index 62426527b..295028b5e 100644
--- a/application/account-management/WebApp/public/index.html
+++ b/application/account-management/WebApp/public/index.html
@@ -8,8 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
-    <meta name="theme-color" content="#eef0f2" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#151b23" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#000000" />
     <title>PlatformPlatform</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
diff --git a/application/back-office/WebApp/public/index.html b/application/back-office/WebApp/public/index.html
index 8ccf47a50..61b3da9f4 100644
--- a/application/back-office/WebApp/public/index.html
+++ b/application/back-office/WebApp/public/index.html
@@ -8,8 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
-    <meta name="theme-color" content="#eef0f2" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#151b23" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#000000" />
     <title>PlatformPlatform - Back Office</title>
     <link href="/favicon.ico" rel="icon" type="image/x-icon">
     <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">

From c7f1204c380dae3bca30e7133333e4064c6485fa Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 22:35:22 +0200
Subject: [PATCH 21/37] Make user table responsive with conditional column
 rendering for different screen sizes and remove column header for Actions
 column

---
 .../admin/users/-components/UserTable.tsx     | 228 ++++++++++--------
 .../shared/translations/locale/da-DK.po       |   3 -
 .../shared/translations/locale/en-US.po       |   3 -
 .../shared/translations/locale/nl-NL.po       |   3 -
 4 files changed, 129 insertions(+), 108 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 3711f6963..65151826c 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -186,6 +186,20 @@ export function UserTable({
     };
   }, [selectedUsers, onViewProfile]);
 
+  // Media queries for responsive columns - must be before early returns
+  const [isMinSm, setIsMinSm] = useState(window.matchMedia(MEDIA_QUERIES.sm).matches);
+  const [isMinMd, setIsMinMd] = useState(window.matchMedia(MEDIA_QUERIES.md).matches);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMinSm(window.matchMedia(MEDIA_QUERIES.sm).matches);
+      setIsMinMd(window.matchMedia(MEDIA_QUERIES.md).matches);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   if (isLoading) {
     return null;
   }
@@ -207,113 +221,129 @@ export function UserTable({
         aria-label={t`Users`}
       >
         <TableHeader>
-          <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
+          <Column
+            allowsSorting={true}
+            id={SortableUserProperties.Name}
+            isRowHeader={true}
+            minWidth={isMinSm ? 250 : undefined}
+          >
             <Trans>Name</Trans>
           </Column>
-          <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
-            <Trans>Email</Trans>
-          </Column>
-          <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
-            <Trans>Created</Trans>
-          </Column>
-          <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
-            <Trans>Modified</Trans>
-          </Column>
-          <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
-            <Trans>Role</Trans>
-          </Column>
-          <Column width={100}>
-            <Trans>Actions</Trans>
-          </Column>
+          {isMinSm && (
+            <Column minWidth={160} allowsSorting={true} id={SortableUserProperties.Email}>
+              <Trans>Email</Trans>
+            </Column>
+          )}
+          {isMinMd && (
+            <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
+              <Trans>Created</Trans>
+            </Column>
+          )}
+          {isMinMd && (
+            <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
+              <Trans>Modified</Trans>
+            </Column>
+          )}
+          {isMinSm && (
+            <Column width={135} allowsSorting={true} id={SortableUserProperties.Role}>
+              <Trans>Role</Trans>
+            </Column>
+          )}
         </TableHeader>
         <TableBody>
           {users?.users.map((user) => (
             <Row key={user.id} id={user.id}>
               <Cell>
-                <Text className="flex h-14 w-full items-center justify-start gap-2 p-0 text-left font-normal">
-                  <Avatar
-                    initials={getInitials(user.firstName, user.lastName, user.email)}
-                    avatarUrl={user.avatarUrl}
-                    size="sm"
-                    isRound={true}
-                  />
-                  <Text className="flex flex-col truncate">
-                    <Text className="truncate text-foreground">
-                      {user.firstName} {user.lastName}
-                      {user.emailConfirmed ? (
-                        ""
-                      ) : (
-                        <Badge variant="outline">
-                          <Trans>Pending</Trans>
-                        </Badge>
-                      )}
-                    </Text>
-                    <Text className="truncate">{user.title ?? ""}</Text>
-                  </Text>
-                </Text>
-              </Cell>
-              <Cell>
-                <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
-              </Cell>
-              <Cell>
-                <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                  {formatDate(user.createdAt)}
-                </Text>
-              </Cell>
-              <Cell>
-                <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                  {formatDate(user.modifiedAt)}
-                </Text>
-              </Cell>
-              <Cell>
-                <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                  <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
-                </Text>
-              </Cell>
-              <Cell>
-                <Text className="flex w-full justify-end">
-                  <MenuTrigger
-                    onOpenChange={(isOpen) => {
-                      if (isOpen) {
-                        onSelectedUsersChange([user]);
-                      }
-                    }}
-                  >
-                    <Button variant="icon" aria-label={t`User actions`}>
-                      <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
-                    </Button>
-                    <Menu>
-                      <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
-                        <UserIcon className="h-4 w-4" />
-                        <Trans>View profile</Trans>
-                      </MenuItem>
-                      {userInfo?.role === "Owner" && (
-                        <>
-                          <MenuItem
-                            id="changeRole"
-                            isDisabled={user.id === userInfo?.id}
-                            onAction={() => onChangeRole(user)}
-                          >
-                            <SettingsIcon className="h-4 w-4" />
-                            <Trans>Change role</Trans>
-                          </MenuItem>
-                          <MenuSeparator />
-                          <MenuItem
-                            id="deleteUser"
-                            isDisabled={user.id === userInfo?.id}
-                            onAction={() => onDeleteUser(user)}
-                          >
-                            <Trash2Icon className="h-4 w-4 text-destructive" />
-                            <span className="text-destructive">
-                              <Trans>Delete</Trans>
-                            </span>
-                          </MenuItem>
-                        </>
-                      )}
-                    </Menu>
-                  </MenuTrigger>
-                </Text>
+                <div className="flex h-14 w-full items-center justify-between gap-2 p-0">
+                  <div className="flex min-w-0 flex-1 items-center gap-2 text-left font-normal">
+                    <Avatar
+                      initials={getInitials(user.firstName, user.lastName, user.email)}
+                      avatarUrl={user.avatarUrl}
+                      size="sm"
+                      isRound={true}
+                    />
+                    <div className="flex min-w-0 flex-1 flex-col">
+                      <div className="flex items-center gap-2 truncate text-foreground">
+                        <span className="truncate">
+                          {user.firstName} {user.lastName}
+                        </span>
+                        {user.emailConfirmed ? null : (
+                          <Badge variant="outline" className="shrink-0">
+                            <Trans>Pending</Trans>
+                          </Badge>
+                        )}
+                      </div>
+                      <Text className="truncate text-muted-foreground text-sm">{user.title ?? ""}</Text>
+                    </div>
+                  </div>
+                </div>
               </Cell>
+              {isMinSm && (
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
+                </Cell>
+              )}
+              {isMinMd && (
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                    {formatDate(user.createdAt)}
+                  </Text>
+                </Cell>
+              )}
+              {isMinMd && (
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                    {formatDate(user.modifiedAt)}
+                  </Text>
+                </Cell>
+              )}
+              {isMinSm && (
+                <Cell>
+                  <div className="flex h-full w-full items-center justify-between p-0">
+                    <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
+                    <MenuTrigger
+                      onOpenChange={(isOpen) => {
+                        if (isOpen) {
+                          onSelectedUsersChange([user]);
+                        }
+                      }}
+                    >
+                      <Button variant="icon" aria-label={t`User actions`}>
+                        <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
+                      </Button>
+                      <Menu>
+                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
+                          <UserIcon className="h-4 w-4" />
+                          <Trans>View profile</Trans>
+                        </MenuItem>
+                        {userInfo?.role === "Owner" && (
+                          <>
+                            <MenuItem
+                              id="changeRole"
+                              isDisabled={user.id === userInfo?.id}
+                              onAction={() => onChangeRole(user)}
+                            >
+                              <SettingsIcon className="h-4 w-4" />
+                              <Trans>Change role</Trans>
+                            </MenuItem>
+                            <MenuSeparator />
+                            <MenuItem
+                              id="deleteUser"
+                              isDisabled={user.id === userInfo?.id}
+                              onAction={() => onDeleteUser(user)}
+                            >
+                              <Trash2Icon className="h-4 w-4 text-destructive" />
+                              <span className="text-destructive">
+                                <Trans>Delete</Trans>
+                              </span>
+                            </MenuItem>
+                          </>
+                        )}
+                      </Menu>
+                    </MenuTrigger>
+                  </div>
+                </Cell>
+              )}
             </Row>
           ))}
         </TableBody>
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po
index 343d4c44b..66ce31610 100644
--- a/application/account-management/WebApp/shared/translations/locale/da-DK.po
+++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po
@@ -31,9 +31,6 @@ msgstr "Kontoindstillinger"
 msgid "Account updated successfully"
 msgstr "Konto opdateret succesfuldt"
 
-msgid "Actions"
-msgstr "Handlinger"
-
 msgid "Active"
 msgstr "Aktiv"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po
index 5cd3ed62b..9a36de3ef 100644
--- a/application/account-management/WebApp/shared/translations/locale/en-US.po
+++ b/application/account-management/WebApp/shared/translations/locale/en-US.po
@@ -31,9 +31,6 @@ msgstr "Account settings"
 msgid "Account updated successfully"
 msgstr "Account updated successfully"
 
-msgid "Actions"
-msgstr "Actions"
-
 msgid "Active"
 msgstr "Active"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
index 7bc27d81d..31b65b0a2 100644
--- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po
+++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
@@ -31,9 +31,6 @@ msgstr "Accountinstellingen"
 msgid "Account updated successfully"
 msgstr "Account succesvol bijgewerkt"
 
-msgid "Actions"
-msgstr "Acties"
-
 msgid "Active"
 msgstr "Actief"
 

From 7b21309d6814469663e82ebf631180953ee9199f Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 23:27:48 +0200
Subject: [PATCH 22/37] Remove autofocus from admin input fields to prevent
 mobile keyboards

---
 .../WebApp/federated-modules/common/UserProfileModal.tsx         | 1 -
 .../account-management/WebApp/routes/admin/account/index.tsx     | 1 -
 .../WebApp/routes/admin/users/-components/UserQuerying.tsx       | 1 -
 3 files changed, 3 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx b/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
index df2816a20..2e132c6af 100644
--- a/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
+++ b/application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx
@@ -208,7 +208,6 @@ export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<Prof
 
               <div className="flex flex-col gap-4 sm:flex-row">
                 <TextField
-                  autoFocus={true}
                   isRequired={true}
                   name="firstName"
                   label={t`First name`}
diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx
index a5ef85302..395ae7475 100644
--- a/application/account-management/WebApp/routes/admin/account/index.tsx
+++ b/application/account-management/WebApp/routes/admin/account/index.tsx
@@ -81,7 +81,6 @@ export function AccountSettings() {
 
           <img src={logoWrap} alt={t`Logo`} className="max-h-16 max-w-64" />
           <TextField
-            autoFocus={true}
             isRequired={true}
             name="name"
             defaultValue={tenant?.name ?? ""}
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index 52d395c0d..34a5e691f 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -304,7 +304,6 @@ export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQuer
           updateFilter({ search: (search as string) || undefined }, true);
         }}
         label={t`Search`}
-        autoFocus={true}
         className="min-w-32"
       />
 

From b3df044b8baf862676f970716b8cda0b4591a934 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Fri, 25 Jul 2025 23:41:44 +0200
Subject: [PATCH 23/37] Fix double-tap navigation issue on iPad by using React
 Aria Link component

---
 .../shared-webapp/ui/components/SideMenu.tsx  | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index ddac881e1..cad9c51ad 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -317,31 +317,6 @@ export function FederatedMenuButton({
 
   const linkClassName = menuButtonStyles({ isCollapsed, isActive, isDisabled });
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    // Auto-close overlay after navigation
-    if (overlayCtx?.isOpen) {
-      overlayCtx.close();
-    }
-
-    // Always prevent default to handle navigation ourselves
-    e.preventDefault();
-
-    if (isCurrentSystem) {
-      // Same system - use programmatic navigation
-      window.history.pushState({}, "", to);
-      // Dispatch a popstate event using the standard Event constructor
-      window.dispatchEvent(new Event("popstate"));
-    } else {
-      // Different system - force reload
-      window.location.href = to;
-    }
-  };
-
   // For collapsed menu, wrap in TooltipTrigger
   if (isCollapsed) {
     return (
@@ -386,19 +361,40 @@ export function FederatedMenuButton({
     );
   }
 
-  // For expanded menu, use a regular anchor tag with onClick handler
+  // For expanded menu, use React Aria Link for consistent touch handling
   return (
     <div className="relative">
       <ActiveIndicator isActive={isActive} isMobileMenu={isMobileMenu} isCollapsed={isCollapsed} />
-      <a
-        href={to}
+      <Link
+        href={undefined}
         className={linkClassName}
-        onClick={handleClick}
-        aria-disabled={isDisabled}
+        variant="ghost"
+        underline={false}
+        isDisabled={isDisabled}
         aria-current={isActive ? "page" : undefined}
+        onPress={() => {
+          if (isDisabled) {
+            return;
+          }
+
+          // Auto-close overlay after navigation
+          if (overlayCtx?.isOpen) {
+            overlayCtx.close();
+          }
+
+          if (isCurrentSystem) {
+            // Same system - use programmatic navigation
+            window.history.pushState({}, "", to);
+            // Dispatch a popstate event using the standard Event constructor
+            window.dispatchEvent(new Event("popstate"));
+          } else {
+            // Different system - force reload
+            window.location.href = to;
+          }
+        }}
       >
         <MenuLinkContent icon={Icon} label={label} isActive={isActive} isCollapsed={isCollapsed} />
-      </a>
+      </Link>
     </div>
   );
 }

From 79940a21aafe3acedefb104f836aec057f736006 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sat, 26 Jul 2025 00:25:57 +0200
Subject: [PATCH 24/37] Add touch support for side menu resizing on iPad

---
 .../shared-webapp/ui/components/SideMenu.tsx  | 773 ++++++++++++------
 1 file changed, 510 insertions(+), 263 deletions(-)

diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index cad9c51ad..bca1462c3 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -471,34 +471,6 @@ const _getUserPreference = (): boolean => {
   return localStorage.getItem("side-menu-collapsed") === "true";
 };
 
-// Helper function to check if drag movement has started
-const _checkDragStarted = (
-  e: MouseEvent,
-  dragStartPos: React.MutableRefObject<{ x: number; y: number } | null>,
-  hasDraggedRef: React.MutableRefObject<boolean>
-): void => {
-  if (dragStartPos.current && !hasDraggedRef.current) {
-    const distance = Math.abs(e.clientX - dragStartPos.current.x) + Math.abs(e.clientY - dragStartPos.current.y);
-    if (distance > 5) {
-      hasDraggedRef.current = true;
-    }
-  }
-};
-
-// Helper function to handle resize actions
-const _handleResizeAction = (
-  mouseX: number,
-  isCollapsed: boolean,
-  hasTriggeredCollapse: boolean,
-  setMenuWidth: (width: number) => void
-): void => {
-  if (!isCollapsed && !hasTriggeredCollapse) {
-    const newWidth = Math.min(Math.max(mouseX, SIDE_MENU_MIN_WIDTH), SIDE_MENU_MAX_WIDTH);
-    setMenuWidth(newWidth);
-    window.dispatchEvent(new CustomEvent("side-menu-resize", { detail: { width: newWidth } }));
-  }
-};
-
 // Helper function to dispatch menu toggle event
 const _dispatchMenuToggleEvent = (overlayMode: boolean, isExpanded: boolean): void => {
   if (overlayMode) {
@@ -508,6 +480,214 @@ const _dispatchMenuToggleEvent = (overlayMode: boolean, isExpanded: boolean): vo
   }
 };
 
+// Custom hook for overlay behavior
+function useOverlayHandlers({
+  overlayMode,
+  isOverlayOpen,
+  closeOverlay,
+  sideMenuRef
+}: {
+  overlayMode: boolean;
+  isOverlayOpen: boolean;
+  closeOverlay: () => void;
+  sideMenuRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  // Handle click outside for overlay
+  useEffect(() => {
+    if (!overlayMode || !isOverlayOpen) {
+      return;
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (sideMenuRef.current && !sideMenuRef.current.contains(event.target as Node)) {
+        closeOverlay();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closeOverlay();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [overlayMode, isOverlayOpen, closeOverlay, sideMenuRef]);
+
+  // Close mobile menu on resize
+  useEffect(() => {
+    const handleResize = () => {
+      const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches;
+      if (isNowMedium && isOverlayOpen) {
+        closeOverlay();
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOverlayOpen, closeOverlay]);
+
+  // Focus trap for overlay
+  useEffect(() => {
+    if (!isOverlayOpen || !overlayMode) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      _handleFocusTrap(e, sideMenuRef);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOverlayOpen, overlayMode, sideMenuRef]);
+}
+
+// Helper to handle resize movement
+function createResizeHandler(params: {
+  isCollapsed: boolean;
+  dragStartPos: React.MutableRefObject<{ x: number; y: number } | null>;
+  hasDraggedRef: React.MutableRefObject<boolean>;
+  initialMenuWidth: React.MutableRefObject<number>;
+  toggleMenu: () => void;
+  setIsResizing: (value: boolean) => void;
+  setMenuWidth: (value: number) => void;
+}) {
+  let hasTriggeredCollapse = false;
+
+  const checkDragStarted = (clientX: number, clientY: number) => {
+    if (!params.dragStartPos.current) {
+      return false;
+    }
+    const distance =
+      Math.abs(clientX - params.dragStartPos.current.x) + Math.abs(clientY - params.dragStartPos.current.y);
+    return distance > 5;
+  };
+
+  const handleResize = (newWidth: number) => {
+    const clampedWidth = Math.min(Math.max(newWidth, SIDE_MENU_MIN_WIDTH), SIDE_MENU_MAX_WIDTH);
+    params.setMenuWidth(clampedWidth);
+    window.dispatchEvent(new CustomEvent("side-menu-resize", { detail: { width: clampedWidth } }));
+  };
+
+  const handleToggle = () => {
+    if (!params.isCollapsed) {
+      hasTriggeredCollapse = true;
+    }
+    params.toggleMenu();
+    params.setIsResizing(false);
+    document.body.style.cursor = "";
+  };
+
+  return (e: MouseEvent | TouchEvent) => {
+    const { x: clientX, y: clientY } = _getClientCoordinates(e);
+
+    // Check if drag has started
+    if (!params.hasDraggedRef.current) {
+      params.hasDraggedRef.current = checkDragStarted(clientX, clientY);
+    }
+
+    if (!params.hasDraggedRef.current || !params.dragStartPos.current) {
+      return;
+    }
+
+    const deltaX = clientX - params.dragStartPos.current.x;
+    const newWidth = params.initialMenuWidth.current + deltaX;
+
+    // Handle edge cases
+    const shouldToggle = params.isCollapsed ? newWidth > 100 : newWidth < 20 && !hasTriggeredCollapse;
+
+    if (shouldToggle) {
+      handleToggle();
+      return;
+    }
+
+    // Normal resize
+    if (!params.isCollapsed && !hasTriggeredCollapse) {
+      handleResize(newWidth);
+    }
+  };
+}
+
+// Custom hook for resize handling
+function useResizeHandler({
+  isResizing,
+  setIsResizing,
+  menuWidth,
+  setMenuWidth,
+  isCollapsed,
+  toggleMenu,
+  dragStartPos,
+  hasDraggedRef,
+  initialMenuWidth
+}: {
+  isResizing: boolean;
+  setIsResizing: (value: boolean) => void;
+  menuWidth: number;
+  setMenuWidth: (value: number) => void;
+  isCollapsed: boolean;
+  toggleMenu: () => void;
+  dragStartPos: React.MutableRefObject<{ x: number; y: number } | null>;
+  hasDraggedRef: React.MutableRefObject<boolean>;
+  initialMenuWidth: React.MutableRefObject<number>;
+}) {
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+
+    document.body.style.cursor = "col-resize";
+
+    const handleMove = createResizeHandler({
+      isCollapsed,
+      dragStartPos,
+      hasDraggedRef,
+      initialMenuWidth,
+      toggleMenu,
+      setIsResizing,
+      setMenuWidth
+    });
+
+    const handleEnd = () => {
+      setIsResizing(false);
+      document.body.style.cursor = "";
+      if (!isCollapsed) {
+        localStorage.setItem("side-menu-size", menuWidth.toString());
+      }
+      dragStartPos.current = null;
+    };
+
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleEnd);
+    document.addEventListener("touchmove", handleMove);
+    document.addEventListener("touchend", handleEnd);
+    document.addEventListener("touchcancel", handleEnd);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleEnd);
+      document.removeEventListener("touchcancel", handleEnd);
+      document.body.style.cursor = "";
+    };
+  }, [
+    isResizing,
+    menuWidth,
+    isCollapsed,
+    toggleMenu,
+    dragStartPos,
+    hasDraggedRef,
+    initialMenuWidth,
+    setMenuWidth,
+    setIsResizing
+  ]);
+}
+
 // Helper function to save menu preference
 const _saveMenuPreference = (isCollapsed: boolean): void => {
   localStorage.setItem("side-menu-collapsed", isCollapsed.toString());
@@ -542,6 +722,16 @@ const _handleArrowKeyResize = (
   window.dispatchEvent(new CustomEvent("side-menu-resize", { detail: { width: newWidth } }));
 };
 
+// Helper function to get client coordinates from mouse or touch event
+const _getClientCoordinates = (
+  e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
+): { x: number; y: number } => {
+  if ("touches" in e) {
+    return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }
+  return { x: e.clientX, y: e.clientY };
+};
+
 // Backdrop component for overlay mode
 const OverlayBackdrop = ({ closeOverlay }: { closeOverlay: () => void }) => (
   <div
@@ -596,73 +786,210 @@ const ResizableToggleButton = ({
   actualIsCollapsed
 }: {
   toggleButtonRef: React.RefObject<HTMLButtonElement>;
-  handleResizeStart: (e: React.MouseEvent) => void;
+  handleResizeStart: (e: React.MouseEvent | React.TouchEvent) => void;
   hasDraggedRef: React.MutableRefObject<boolean>;
   toggleMenu: () => void;
   menuWidth: number;
   setMenuWidth: (width: number) => void;
   ariaLabel: string;
   actualIsCollapsed: boolean;
-}) => (
-  <button
-    ref={toggleButtonRef}
-    type="button"
-    className="toggle-button flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
-    onMouseDown={handleResizeStart}
-    onClick={() => {
-      if (!hasDraggedRef.current) {
-        toggleMenu();
-      }
-    }}
-    onKeyDown={(e) => {
-      if (e.key === "Enter" || e.key === " ") {
+}) => {
+  const handleClick = () => {
+    if (!hasDraggedRef.current) {
+      toggleMenu();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case "Enter":
+      case " ": {
         e.preventDefault();
         toggleMenu();
-      } else if (e.key === "ArrowLeft") {
+        break;
+      }
+      case "ArrowLeft":
         _handleArrowKeyResize(e, "left", menuWidth, setMenuWidth);
-      } else if (e.key === "ArrowRight") {
+        break;
+      case "ArrowRight":
         _handleArrowKeyResize(e, "right", menuWidth, setMenuWidth);
-      }
-    }}
-    aria-label={ariaLabel}
-  >
-    <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
-  </button>
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <button
+      ref={toggleButtonRef}
+      type="button"
+      className="toggle-button flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
+      onMouseDown={handleResizeStart}
+      onTouchStart={handleResizeStart}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label={ariaLabel}
+    >
+      <ToggleButtonContent isCollapsed={actualIsCollapsed} />
+    </button>
+  );
+};
+
+// Helper to create toggle button content
+const ToggleButtonContent = ({ isCollapsed }: { isCollapsed: boolean }) => (
+  <ChevronsLeftIcon className={chevronStyles({ isCollapsed })} />
 );
 
-export function SideMenu({
-  children,
+// Menu navigation component
+const MenuNav = ({
+  sideMenuRef,
+  actualIsCollapsed,
+  overlayMode,
+  isOverlayOpen,
+  isHidden,
+  className,
+  isResizing,
+  canResize,
+  menuWidth,
+  shouldShowResizeHandle,
+  handleResizeStart,
+  tenantName,
+  toggleButtonRef,
+  toggleMenu,
+  hasDraggedRef,
+  setMenuWidth,
   sidebarToggleAriaLabel,
-  mobileMenuAriaLabel,
-  topMenuContent,
-  tenantName
-}: Readonly<SideMenuProps>) {
-  const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu();
-  const sideMenuRef = useRef<HTMLDivElement>(null);
-  const toggleButtonRef = useRef<HTMLButtonElement | HTMLDivElement>(null);
+  forceCollapsed,
+  children
+}: {
+  sideMenuRef: React.RefObject<HTMLDivElement | null>;
+  actualIsCollapsed: boolean;
+  overlayMode: boolean;
+  isOverlayOpen: boolean;
+  isHidden: boolean;
+  className: string;
+  isResizing: boolean;
+  canResize: boolean;
+  menuWidth: number;
+  shouldShowResizeHandle: boolean;
+  handleResizeStart: (e: React.MouseEvent | React.TouchEvent) => void;
+  tenantName?: string;
+  toggleButtonRef: React.RefObject<HTMLButtonElement | HTMLDivElement | null>;
+  toggleMenu: () => void;
+  hasDraggedRef: React.RefObject<boolean>;
+  setMenuWidth: (width: number) => void;
+  sidebarToggleAriaLabel?: string;
+  forceCollapsed: boolean;
+  children: React.ReactNode;
+}) => (
+  <nav
+    ref={sideMenuRef}
+    className={`${sideMenuStyles({
+      isCollapsed: actualIsCollapsed,
+      overlayMode,
+      isOverlayOpen,
+      isHidden: isHidden && !overlayMode,
+      className
+    })} ${isResizing ? "cursor-col-resize select-none" : ""}`}
+    style={canResize ? { width: `${menuWidth}px`, transition: isResizing ? "none" : undefined } : undefined}
+    aria-label="Main navigation"
+  >
+    {/* Vertical divider line - draggable on XL screens */}
+    <div
+      className={`absolute top-0 right-0 h-full border-border border-r ${
+        shouldShowResizeHandle ? "w-2 cursor-col-resize" : ""
+      }`}
+      onMouseDown={shouldShowResizeHandle ? handleResizeStart : undefined}
+      onTouchStart={shouldShowResizeHandle ? handleResizeStart : undefined}
+    />
+
+    {/* Fixed header section with logo */}
+    <div className="relative flex h-[72px] w-full shrink-0 items-center">
+      <LogoSection actualIsCollapsed={actualIsCollapsed} tenantName={tenantName} />
+
+      {/* Toggle button centered on divider, at intersection with topbar border */}
+      <div
+        className={`-translate-y-1/2 absolute top-[72px] right-0 translate-x-1/2 ${
+          !overlayMode && !forceCollapsed ? "cursor-col-resize" : ""
+        }`}
+      >
+        {shouldShowResizeHandle ? (
+          <ResizableToggleButton
+            toggleButtonRef={toggleButtonRef as React.RefObject<HTMLButtonElement>}
+            handleResizeStart={handleResizeStart}
+            hasDraggedRef={hasDraggedRef}
+            toggleMenu={toggleMenu}
+            menuWidth={menuWidth}
+            setMenuWidth={setMenuWidth}
+            ariaLabel={sidebarToggleAriaLabel || ""}
+            actualIsCollapsed={actualIsCollapsed}
+          />
+        ) : (
+          <div ref={toggleButtonRef as React.RefObject<HTMLDivElement>}>
+            <ToggleButton
+              aria-label={sidebarToggleAriaLabel}
+              className="toggle-button flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
+              isSelected={actualIsCollapsed}
+              onPress={toggleMenu}
+            >
+              <ToggleButtonContent isCollapsed={actualIsCollapsed} />
+            </ToggleButton>
+          </div>
+        )}
+      </div>
+    </div>
+
+    {/* Scrollable menu content */}
+    <div className={`flex-1 overflow-y-auto ${actualIsCollapsed ? "px-2" : "px-3"} mt-2`}>
+      <div className="flex flex-col gap-2 pt-1.5">{children}</div>
+    </div>
+  </nav>
+);
+
+// Custom hook to manage menu state
+function useMenuState(forceCollapsed: boolean) {
   const [isOverlayOpen, setIsOverlayOpen] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
   const [menuWidth, setMenuWidth] = useState(_getInitialMenuWidth);
   const [isCollapsed, setIsCollapsed] = useState(() => _getInitialCollapsedState(forceCollapsed));
   const [userPreference, setUserPreference] = useState(_getUserPreference);
 
   // Update collapsed state when screen size changes
   useEffect(() => {
-    if (forceCollapsed) {
-      // Going to medium screen - force collapse but remember user preference
-      setIsCollapsed(true);
-    } else {
-      // Going back to large screen - restore user preference
-      setIsCollapsed(userPreference);
-    }
+    setIsCollapsed(forceCollapsed || userPreference);
   }, [forceCollapsed, userPreference]);
 
-  // The actual visual collapsed state
-  const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed;
-
-  // Check if we're on XL screen (for resize functionality)
-  const isXlScreen = !overlayMode && !forceCollapsed;
+  return {
+    isOverlayOpen,
+    setIsOverlayOpen,
+    menuWidth,
+    setMenuWidth,
+    isCollapsed,
+    setIsCollapsed,
+    userPreference,
+    setUserPreference
+  };
+}
 
+// Custom hook for toggle menu logic
+function useToggleMenu({
+  overlayMode,
+  isOverlayOpen,
+  setIsOverlayOpen,
+  forceCollapsed,
+  isCollapsed,
+  setIsCollapsed,
+  setUserPreference,
+  toggleButtonRef
+}: {
+  overlayMode: boolean;
+  isOverlayOpen: boolean;
+  setIsOverlayOpen: (value: boolean) => void;
+  forceCollapsed: boolean;
+  isCollapsed: boolean;
+  setIsCollapsed: (value: boolean) => void;
+  setUserPreference: (value: boolean) => void;
+  toggleButtonRef: React.RefObject<HTMLButtonElement | HTMLDivElement | null>;
+}) {
   const toggleMenu = useCallback(() => {
     if (overlayMode) {
       const newIsOpen = !isOverlayOpen;
@@ -675,217 +1002,137 @@ export function SideMenu({
       _saveMenuPreference(newCollapsed);
       _dispatchMenuToggleEvent(false, !newCollapsed);
     }
-    // Maintain focus on the toggle button after state change
     setTimeout(() => _focusToggleButton(toggleButtonRef), 0);
-  }, [overlayMode, isOverlayOpen, forceCollapsed, isCollapsed]);
+  }, [
+    overlayMode,
+    isOverlayOpen,
+    forceCollapsed,
+    isCollapsed,
+    setIsOverlayOpen,
+    setIsCollapsed,
+    setUserPreference,
+    toggleButtonRef
+  ]);
 
   const closeOverlay = useCallback(() => {
-    if (overlayMode && isOverlayOpen) {
-      setIsOverlayOpen(false);
-      _dispatchMenuToggleEvent(true, false);
-    }
-  }, [overlayMode, isOverlayOpen]);
-
-  // Handle click outside for overlay
-  useEffect(() => {
     if (!overlayMode || !isOverlayOpen) {
       return;
     }
+    setIsOverlayOpen(false);
+    _dispatchMenuToggleEvent(true, false);
+  }, [overlayMode, isOverlayOpen, setIsOverlayOpen]);
 
-    const handleClickOutside = (event: MouseEvent) => {
-      if (sideMenuRef.current && !sideMenuRef.current.contains(event.target as Node)) {
-        closeOverlay();
-      }
-    };
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        closeOverlay();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [overlayMode, isOverlayOpen, closeOverlay]);
-
-  // Close mobile menu on resize
-  useEffect(() => {
-    const handleResize = () => {
-      const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches;
-      if (isNowMedium && isOverlayOpen) {
-        closeOverlay();
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [isOverlayOpen, closeOverlay]);
+  return { toggleMenu, closeOverlay };
+}
 
-  // Focus trap for overlay
-  useEffect(() => {
-    if (!isOverlayOpen || !overlayMode) {
-      return;
-    }
+export function SideMenu({
+  children,
+  sidebarToggleAriaLabel,
+  mobileMenuAriaLabel,
+  topMenuContent,
+  tenantName
+}: Readonly<SideMenuProps>) {
+  const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu();
+  const sideMenuRef = useRef<HTMLDivElement>(null);
+  const toggleButtonRef = useRef<HTMLButtonElement | HTMLDivElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      _handleFocusTrap(e, sideMenuRef);
-    };
+  // Use the custom hook for menu state management
+  const { isOverlayOpen, setIsOverlayOpen, menuWidth, setMenuWidth, isCollapsed, setIsCollapsed, setUserPreference } =
+    useMenuState(forceCollapsed);
 
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOverlayOpen, overlayMode]);
+  // Compute derived states
+  const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed;
+  const shouldShowResizeHandle = !overlayMode && !forceCollapsed;
+  const canResize = shouldShowResizeHandle && !isCollapsed;
+
+  // Use the toggle menu hook
+  const { toggleMenu, closeOverlay } = useToggleMenu({
+    overlayMode,
+    isOverlayOpen,
+    setIsOverlayOpen,
+    forceCollapsed,
+    isCollapsed,
+    setIsCollapsed,
+    setUserPreference,
+    toggleButtonRef
+  });
+
+  // Use custom hooks for overlay behavior
+  useOverlayHandlers({
+    overlayMode,
+    isOverlayOpen,
+    closeOverlay,
+    sideMenuRef
+  });
 
   // Track mouse movement to detect dragging
   const dragStartPos = useRef<{ x: number; y: number } | null>(null);
   const hasDraggedRef = useRef(false);
+  const initialMenuWidth = useRef<number>(0);
 
-  // Handle resize drag
-  const handleResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-    dragStartPos.current = { x: e.clientX, y: e.clientY };
-    hasDraggedRef.current = false;
-  }, []);
-
-  useEffect(() => {
-    if (!isResizing) {
-      return;
-    }
-
-    // Add global cursor style
-    document.body.style.cursor = "col-resize";
-
-    let hasTriggeredCollapse = false;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const mouseX = e.clientX - 8;
-
-      // Check if mouse has moved more than 5px from start (indicates dragging)
-      _checkDragStarted(e, dragStartPos, hasDraggedRef);
-
-      // If dragging from collapsed state and mouse is past collapsed width, expand
-      if (isCollapsed && mouseX > 100) {
-        toggleMenu();
-        setIsResizing(false);
-        document.body.style.cursor = "";
-        return;
-      }
-
-      // If dragging to edge from expanded state, collapse
-      if (!isCollapsed && mouseX < 20 && !hasTriggeredCollapse) {
-        hasTriggeredCollapse = true;
-        toggleMenu();
-        setIsResizing(false);
-        document.body.style.cursor = "";
-        return;
-      }
-
-      // Normal resize when expanded
-      _handleResizeAction(mouseX, isCollapsed, hasTriggeredCollapse, setMenuWidth);
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-      document.body.style.cursor = "";
-      // Only save if we didn't trigger collapse
-      if (!hasTriggeredCollapse && !isCollapsed) {
-        localStorage.setItem("side-menu-size", menuWidth.toString());
-      }
-      dragStartPos.current = null;
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
+  // Handle resize drag for both mouse and touch
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+
+      // Handle both mouse and touch events
+      const coords = _getClientCoordinates(e);
+      dragStartPos.current = coords;
+      hasDraggedRef.current = false;
+      initialMenuWidth.current = menuWidth;
+    },
+    [menuWidth]
+  );
 
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-    };
-  }, [isResizing, menuWidth, isCollapsed, toggleMenu]);
+  // Extract resize handling into a custom hook to reduce complexity
+  useResizeHandler({
+    isResizing,
+    setIsResizing,
+    menuWidth,
+    setMenuWidth,
+    isCollapsed,
+    toggleMenu,
+    dragStartPos,
+    hasDraggedRef,
+    initialMenuWidth
+  });
+
+  const menuContent = (
+    <collapsedContext.Provider value={actualIsCollapsed}>
+      <overlayContext.Provider value={{ isOpen: isOverlayOpen, close: closeOverlay }}>
+        <MenuNav
+          sideMenuRef={sideMenuRef}
+          actualIsCollapsed={actualIsCollapsed}
+          overlayMode={overlayMode}
+          isOverlayOpen={isOverlayOpen}
+          isHidden={isHidden}
+          className={className}
+          isResizing={isResizing}
+          canResize={canResize}
+          menuWidth={menuWidth}
+          shouldShowResizeHandle={shouldShowResizeHandle}
+          handleResizeStart={handleResizeStart}
+          tenantName={tenantName}
+          toggleButtonRef={toggleButtonRef}
+          toggleMenu={toggleMenu}
+          hasDraggedRef={hasDraggedRef}
+          setMenuWidth={setMenuWidth}
+          sidebarToggleAriaLabel={sidebarToggleAriaLabel}
+          forceCollapsed={forceCollapsed}
+        >
+          {children}
+        </MenuNav>
+      </overlayContext.Provider>
+    </collapsedContext.Provider>
+  );
 
   return (
     <>
-      {/* Backdrop for overlay mode */}
       {overlayMode && isOverlayOpen && <OverlayBackdrop closeOverlay={closeOverlay} />}
-
-      <collapsedContext.Provider value={actualIsCollapsed}>
-        <overlayContext.Provider value={{ isOpen: isOverlayOpen, close: closeOverlay }}>
-          <nav
-            ref={sideMenuRef}
-            className={`${sideMenuStyles({
-              isCollapsed: actualIsCollapsed,
-              overlayMode,
-              isOverlayOpen,
-              isHidden: isHidden && !overlayMode,
-              className
-            })} ${isResizing ? "cursor-col-resize select-none" : ""}`}
-            style={{
-              width: isXlScreen && !isCollapsed ? `${menuWidth}px` : undefined,
-              transition: isResizing ? "none" : undefined
-            }}
-            aria-label="Main navigation"
-          >
-            {/* Vertical divider line - draggable on XL screens */}
-            <div
-              className={`absolute top-0 right-0 h-full border-border border-r ${
-                isXlScreen ? "w-2 cursor-col-resize" : ""
-              }`}
-              onMouseDown={isXlScreen ? handleResizeStart : undefined}
-            />
-
-            {/* Fixed header section with logo */}
-            <div className="relative flex h-[72px] w-full shrink-0 items-center">
-              <LogoSection actualIsCollapsed={actualIsCollapsed} tenantName={tenantName} />
-
-              {/* Toggle button centered on divider, at intersection with topbar border */}
-              <div
-                className={`-translate-y-1/2 absolute top-[72px] right-0 translate-x-1/2 ${
-                  !overlayMode && !forceCollapsed ? "cursor-col-resize" : ""
-                }`}
-              >
-                {isXlScreen ? (
-                  <ResizableToggleButton
-                    toggleButtonRef={toggleButtonRef as React.RefObject<HTMLButtonElement>}
-                    handleResizeStart={handleResizeStart}
-                    hasDraggedRef={hasDraggedRef}
-                    toggleMenu={toggleMenu}
-                    menuWidth={menuWidth}
-                    setMenuWidth={setMenuWidth}
-                    ariaLabel={sidebarToggleAriaLabel}
-                    actualIsCollapsed={actualIsCollapsed}
-                  />
-                ) : (
-                  <div ref={toggleButtonRef as React.RefObject<HTMLDivElement>}>
-                    <ToggleButton
-                      aria-label={sidebarToggleAriaLabel}
-                      className={
-                        "toggle-button flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
-                      }
-                      isSelected={actualIsCollapsed}
-                      onPress={toggleMenu}
-                    >
-                      <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
-                    </ToggleButton>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Scrollable menu content */}
-            <div className={`flex-1 overflow-y-auto ${actualIsCollapsed ? "px-2" : "px-3"} mt-2`}>
-              <div className="flex flex-col gap-2 pt-1.5">{children}</div>
-            </div>
-          </nav>
-        </overlayContext.Provider>
-      </collapsedContext.Provider>
-
+      {menuContent}
       {/* Mobile floating button */}
       <collapsedContext.Provider value={false}>
         <MobileMenu ariaLabel={mobileMenuAriaLabel} topMenuContent={topMenuContent} />

From abca6e016ae0de6b1b92a0527b071e9e7a522592 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sat, 26 Jul 2025 00:29:53 +0200
Subject: [PATCH 25/37] Fix toast rounded corners being cut off on mobile
 screens

---
 application/shared-webapp/ui/components/Toast.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/application/shared-webapp/ui/components/Toast.tsx b/application/shared-webapp/ui/components/Toast.tsx
index 3f20847af..347c18790 100644
--- a/application/shared-webapp/ui/components/Toast.tsx
+++ b/application/shared-webapp/ui/components/Toast.tsx
@@ -135,7 +135,7 @@ function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<Toas
     <div
       {...regionProps}
       ref={ref}
-      className="pointer-events-none fixed top-0 right-0 left-0 z-[100] flex max-h-screen w-full flex-col gap-1 p-1 sm:top-4 sm:right-4 sm:left-auto sm:max-w-[420px] sm:p-0"
+      className="pointer-events-none fixed top-0 right-0 left-0 z-[100] flex max-h-screen w-full flex-col gap-1 p-2 sm:top-4 sm:right-4 sm:left-auto sm:max-w-[420px] sm:p-0"
     >
       {state.visibleToasts.map((toast) => (
         <Toast key={toast.key} toast={toast} state={state} />
@@ -145,7 +145,7 @@ function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<Toas
 }
 
 const toastStyle = tv({
-  base: "group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-none border border-x-0 border-t-0 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none sm:rounded-md sm:border",
+  base: "group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
   variants: {
     variant: {
       info: "bg-info text-info-foreground",

From 0c8e98e3cbf622e4bf6a9c25b49136e9d8a84117 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sat, 26 Jul 2025 19:00:42 +0200
Subject: [PATCH 26/37] Implement infinite scroll for users on mobile devices
 without pagination

---
 .../users/-components/UserProfileSidePane.tsx |   8 +-
 .../admin/users/-components/UserTable.tsx     |  71 +++++++++--
 .../admin/users/-hooks/useInfiniteUsers.ts    | 116 ++++++++++++++++++
 3 files changed, 176 insertions(+), 19 deletions(-)
 create mode 100644 application/account-management/WebApp/routes/admin/users/-hooks/useInfiniteUsers.ts

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
index c838012b7..8cde0049d 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -161,10 +161,6 @@ function useSidePaneAccessibility(
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && isOpen) {
         event.preventDefault();
-        const _isSmallScreen = !window.matchMedia(MEDIA_QUERIES.md).matches;
-
-        // Don't restore focus - let the parent handle it
-
         onClose();
       }
     };
@@ -273,8 +269,8 @@ export function UserProfileSidePane({
           </Heading>
         </div>
 
-        {/* Notice when user is not in current filtered view */}
-        {!isUserInCurrentView && (
+        {/* Notice when user is not in current filtered view - only show on desktop with pagination */}
+        {!isUserInCurrentView && !isSmallScreen && (
           <div className="border-border border-b bg-muted px-4 py-3">
             <div className="flex items-center gap-2 text-muted-foreground">
               <InfoIcon className="h-4 w-4 flex-shrink-0" />
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 65151826c..55c4ca994 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -15,9 +15,10 @@ import { formatDate } from "@repo/utils/date/formatDate";
 import { getInitials } from "@repo/utils/string/getInitials";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { EllipsisVerticalIcon, SettingsIcon, Trash2Icon, UserIcon } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { Selection, SortDescriptor } from "react-aria-components";
 import { MenuTrigger, TableBody } from "react-aria-components";
+import { useInfiniteUsers } from "../-hooks/useInfiniteUsers";
 
 type UserDetails = components["schemas"]["UserDetails"];
 
@@ -49,8 +50,10 @@ export function UserTable({
     direction: sortOrder === "Ascending" ? "ascending" : "descending"
   }));
   const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
+  const [isMobile, setIsMobile] = useState(!window.matchMedia(MEDIA_QUERIES.sm).matches);
 
-  const { data: users, isLoading } = api.useQuery("get", "/api/account-management/users", {
+  // Use regular query for desktop
+  const { data: desktopUsers, isLoading: isDesktopLoading } = api.useQuery("get", "/api/account-management/users", {
     params: {
       query: {
         Search: search,
@@ -62,9 +65,32 @@ export function UserTable({
         SortOrder: sortOrder,
         PageOffset: pageOffset
       }
-    }
+    },
+    enabled: !isMobile
   });
 
+  // Use infinite scroll for mobile
+  const {
+    users: mobileUsers,
+    isLoading: isMobileLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore
+  } = useInfiniteUsers({
+    search,
+    userRole,
+    userStatus,
+    startDate,
+    endDate,
+    orderBy,
+    sortOrder,
+    enabled: isMobile
+  });
+
+  // Select data based on device
+  const users = isMobile ? { users: mobileUsers, totalPages: 1, currentPageOffset: 0 } : desktopUsers;
+  const isLoading = isMobile ? isMobileLoading : isDesktopLoading;
+
   const handlePageChange = useCallback(
     (page: number) => {
       navigate({
@@ -194,12 +220,33 @@ export function UserTable({
     const handleResize = () => {
       setIsMinSm(window.matchMedia(MEDIA_QUERIES.sm).matches);
       setIsMinMd(window.matchMedia(MEDIA_QUERIES.md).matches);
+      setIsMobile(!window.matchMedia(MEDIA_QUERIES.sm).matches);
     };
 
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // IntersectionObserver for infinite scroll on mobile
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!isMobile || !loadMoreRef.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
+          loadMore();
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(loadMoreRef.current);
+    return () => observer.disconnect();
+  }, [isMobile, hasMore, isLoadingMore, loadMore]);
+
   if (isLoading) {
     return null;
   }
@@ -219,6 +266,7 @@ export function UserTable({
         sortDescriptor={sortDescriptor}
         onSortChange={handleSortChange}
         aria-label={t`Users`}
+        className={isMobile ? "[&>div]:h-[calc(100vh-14rem)]" : ""}
       >
         <TableHeader>
           <Column
@@ -349,15 +397,12 @@ export function UserTable({
         </TableBody>
       </Table>
 
-      {users && (
-        <div className="bg-background pt-4 max-sm:sticky max-sm:bottom-0 max-sm:border-border max-sm:border-t">
-          <Pagination
-            paginationSize={5}
-            currentPage={currentPage}
-            totalPages={users.totalPages ?? 1}
-            onPageChange={handlePageChange}
-            className="w-full pr-20 sm:hidden"
-          />
+      {/* Mobile: Loading indicator for infinite scroll */}
+      {isMobile && <div ref={loadMoreRef} className="h-1" />}
+
+      {/* Desktop: Regular pagination */}
+      {!isMobile && users && (
+        <div className="bg-background pt-4">
           <Pagination
             paginationSize={9}
             currentPage={currentPage}
@@ -365,7 +410,7 @@ export function UserTable({
             onPageChange={handlePageChange}
             previousLabel={t`Previous`}
             nextLabel={t`Next`}
-            className="hidden w-full sm:flex"
+            className="w-full"
           />
         </div>
       )}
diff --git a/application/account-management/WebApp/routes/admin/users/-hooks/useInfiniteUsers.ts b/application/account-management/WebApp/routes/admin/users/-hooks/useInfiniteUsers.ts
new file mode 100644
index 000000000..06f4c1ed4
--- /dev/null
+++ b/application/account-management/WebApp/routes/admin/users/-hooks/useInfiniteUsers.ts
@@ -0,0 +1,116 @@
+import {
+  type SortOrder,
+  type SortableUserProperties,
+  type UserRole,
+  type UserStatus,
+  api,
+  type components
+} from "@/shared/lib/api/client";
+import { useCallback, useEffect, useState } from "react";
+
+type UserDetails = components["schemas"]["UserDetails"];
+
+interface UseInfiniteUsersParams {
+  search?: string;
+  userRole?: UserRole | null;
+  userStatus?: UserStatus | null;
+  startDate?: string;
+  endDate?: string;
+  orderBy?: SortableUserProperties;
+  sortOrder?: SortOrder;
+  enabled: boolean;
+}
+
+export function useInfiniteUsers({
+  search,
+  userRole,
+  userStatus,
+  startDate,
+  endDate,
+  orderBy,
+  sortOrder,
+  enabled
+}: UseInfiniteUsersParams) {
+  const [allUsers, setAllUsers] = useState<UserDetails[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState<number | null>(null);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  // Initial load query
+  const { data: initialData, isLoading: isInitialLoading } = api.useQuery("get", "/api/account-management/users", {
+    params: {
+      query: {
+        Search: search,
+        UserRole: userRole,
+        UserStatus: userStatus,
+        StartDate: startDate,
+        EndDate: endDate,
+        OrderBy: orderBy,
+        SortOrder: sortOrder,
+        PageOffset: 0
+      }
+    },
+    enabled
+  });
+
+  // State for next page to load
+  const [nextPageToLoad, setNextPageToLoad] = useState<number | null>(null);
+
+  // Load more query
+  const { data: moreData } = api.useQuery("get", "/api/account-management/users", {
+    params: {
+      query: {
+        Search: search,
+        UserRole: userRole,
+        UserStatus: userStatus,
+        StartDate: startDate,
+        EndDate: endDate,
+        OrderBy: orderBy,
+        SortOrder: sortOrder,
+        PageOffset: nextPageToLoad
+      }
+    },
+    enabled: enabled && nextPageToLoad !== null && isLoadingMore
+  });
+
+  // Reset when filters change
+  useEffect(() => {
+    if (initialData) {
+      setAllUsers(initialData.users || []);
+      setTotalPages(initialData.totalPages || 1);
+      setCurrentPage(0);
+      setNextPageToLoad(null);
+    }
+  }, [initialData]);
+
+  // Append more data when loaded
+  useEffect(() => {
+    if (moreData && isLoadingMore) {
+      setAllUsers((prev) => [...prev, ...(moreData.users || [])]);
+      setIsLoadingMore(false);
+      setNextPageToLoad(null);
+    }
+  }, [moreData, isLoadingMore]);
+
+  const loadMore = useCallback(() => {
+    if (isLoadingMore || !totalPages || currentPage >= totalPages - 1) {
+      return;
+    }
+
+    const nextPage = currentPage + 1;
+    setCurrentPage(nextPage);
+    setNextPageToLoad(nextPage);
+    setIsLoadingMore(true);
+  }, [currentPage, totalPages, isLoadingMore]);
+
+  const hasMore = totalPages !== null && currentPage < totalPages - 1;
+
+  return {
+    users: allUsers,
+    isLoading: isInitialLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore,
+    totalPages
+  };
+}

From 483ebb32e1cdbf94535a042e44c23b6f899ddb61 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 02:40:21 +0200
Subject: [PATCH 27/37] Add iOS home screen installation prompt with
 swipe-to-dismiss

---
 .../WebApp/routes/__root.tsx                  |   2 +
 .../back-office/WebApp/routes/__root.tsx      |   2 +
 .../ui/components/AddToHomescreen.tsx         | 114 ++++++++++++++++++
 3 files changed, 118 insertions(+)
 create mode 100644 application/shared-webapp/ui/components/AddToHomescreen.tsx

diff --git a/application/account-management/WebApp/routes/__root.tsx b/application/account-management/WebApp/routes/__root.tsx
index be3ad397f..e0bbf8525 100644
--- a/application/account-management/WebApp/routes/__root.tsx
+++ b/application/account-management/WebApp/routes/__root.tsx
@@ -5,6 +5,7 @@ import { ErrorPage } from "@repo/infrastructure/errorComponents/ErrorPage";
 import { NotFound } from "@repo/infrastructure/errorComponents/NotFoundPage";
 import { ReactAriaRouterProvider } from "@repo/infrastructure/router/ReactAriaRouterProvider";
 import { useInitializeLocale } from "@repo/infrastructure/translations/useInitializeLocale";
+import { AddToHomescreen } from "@repo/ui/components/AddToHomescreen";
 import { ThemeModeProvider } from "@repo/ui/theme/mode/ThemeMode";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Outlet, createRootRoute, useNavigate } from "@tanstack/react-router";
@@ -24,6 +25,7 @@ function Root() {
       <ThemeModeProvider>
         <ReactAriaRouterProvider>
           <AuthenticationProvider navigate={(options) => navigate(options)}>
+            <AddToHomescreen />
             <PageTracker />
             <Outlet />
           </AuthenticationProvider>
diff --git a/application/back-office/WebApp/routes/__root.tsx b/application/back-office/WebApp/routes/__root.tsx
index be3ad397f..e0bbf8525 100644
--- a/application/back-office/WebApp/routes/__root.tsx
+++ b/application/back-office/WebApp/routes/__root.tsx
@@ -5,6 +5,7 @@ import { ErrorPage } from "@repo/infrastructure/errorComponents/ErrorPage";
 import { NotFound } from "@repo/infrastructure/errorComponents/NotFoundPage";
 import { ReactAriaRouterProvider } from "@repo/infrastructure/router/ReactAriaRouterProvider";
 import { useInitializeLocale } from "@repo/infrastructure/translations/useInitializeLocale";
+import { AddToHomescreen } from "@repo/ui/components/AddToHomescreen";
 import { ThemeModeProvider } from "@repo/ui/theme/mode/ThemeMode";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Outlet, createRootRoute, useNavigate } from "@tanstack/react-router";
@@ -24,6 +25,7 @@ function Root() {
       <ThemeModeProvider>
         <ReactAriaRouterProvider>
           <AuthenticationProvider navigate={(options) => navigate(options)}>
+            <AddToHomescreen />
             <PageTracker />
             <Outlet />
           </AuthenticationProvider>
diff --git a/application/shared-webapp/ui/components/AddToHomescreen.tsx b/application/shared-webapp/ui/components/AddToHomescreen.tsx
new file mode 100644
index 000000000..877ccb804
--- /dev/null
+++ b/application/shared-webapp/ui/components/AddToHomescreen.tsx
@@ -0,0 +1,114 @@
+import { Share, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./Button";
+import { Heading } from "./Heading";
+import { Text } from "./Text";
+
+const SESSION_COOKIE_NAME = "add_to_homescreen_dismissed";
+
+export function AddToHomescreen() {
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+  const [translateY, setTranslateY] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const startY = useRef(0);
+  const currentY = useRef(0);
+
+  useEffect(() => {
+    // More comprehensive iOS detection including iPad on iOS 13+
+    const isIos =
+      (/iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window)) ||
+      (navigator.userAgent.includes("Mac") && "ontouchend" in document);
+
+    const isPwa =
+      window.matchMedia("(display-mode: standalone)").matches ||
+      ("standalone" in window.navigator && (window.navigator as unknown as { standalone?: boolean }).standalone) ||
+      false;
+
+    setIsStandalone(isPwa);
+
+    if (isIos && !isPwa) {
+      const hasSessionDismissed = document.cookie.includes(`${SESSION_COOKIE_NAME}=true`);
+
+      if (!hasSessionDismissed) {
+        setShowPrompt(true);
+      }
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    setShowPrompt(false);
+    // Set persistent cookie for 7 days when X button is clicked
+    const date = new Date();
+    date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+    document.cookie = `${SESSION_COOKIE_NAME}=true; expires=${date.toUTCString()}; path=/`;
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setIsDragging(true);
+    startY.current = e.touches[0].clientY;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isDragging) {
+      return;
+    }
+
+    currentY.current = e.touches[0].clientY;
+    const diff = currentY.current - startY.current;
+
+    // Only allow upward swipes
+    if (diff < 0) {
+      setTranslateY(diff);
+    }
+  };
+
+  const handleTouchEnd = () => {
+    setIsDragging(false);
+
+    // If swiped up more than 50px, dismiss
+    if (translateY < -50) {
+      setShowPrompt(false);
+      // Set session cookie - will expire when browser session ends
+      document.cookie = `${SESSION_COOKIE_NAME}=true; path=/`;
+    } else {
+      // Snap back
+      setTranslateY(0);
+    }
+  };
+
+  if (!showPrompt || isStandalone) {
+    return null;
+  }
+
+  return (
+    <div
+      className="slide-in-from-top-2 fixed top-0 right-0 left-0 z-[80] animate-in"
+      style={{
+        transform: `translateY(${translateY}px)`,
+        transition: isDragging ? "none" : "transform 0.2s ease-out"
+      }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <div className="border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/80">
+        <div className="container mx-auto flex items-center justify-between gap-3 px-4 py-4">
+          <img src="/apple-touch-icon.png" alt="PlatformPlatform" className="h-10 w-10 rounded-lg shadow-sm" />
+          <div className="flex-1">
+            <Heading size="md" className="text-sm">
+              Install PlatformPlatform
+            </Heading>
+            <Text className="text-muted-foreground text-xs">
+              Add to your home screen for a faster, app-like experience. Tap <Share className="mx-0.5 inline h-3 w-3" />{" "}
+              then "Add to Home Screen"
+            </Text>
+          </div>
+          <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onPress={handleDismiss}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

From c5de7d61965d7d11304b2d445b7e79ef32353fd3 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sat, 26 Jul 2025 20:02:06 +0200
Subject: [PATCH 28/37] Introduce sticker headers on mobile devices

---
 .../WebApp/routes/admin/account/index.tsx     |   9 +-
 .../WebApp/routes/admin/index.tsx             |  10 +-
 .../admin/users/-components/UserToolbar.tsx   |   2 +-
 .../WebApp/routes/admin/users/index.tsx       |  19 +-
 .../WebApp/routes/back-office/index.tsx       |  18 +-
 .../shared-webapp/ui/components/AppLayout.tsx | 271 ++++++++++++++++--
 application/shared-webapp/ui/tailwind.css     |  16 ++
 7 files changed, 288 insertions(+), 57 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx
index 395ae7475..344bf4ff6 100644
--- a/application/account-management/WebApp/routes/admin/account/index.tsx
+++ b/application/account-management/WebApp/routes/admin/account/index.tsx
@@ -58,14 +58,9 @@ export function AccountSettings() {
             </Breadcrumb>
           </TopMenu>
         }
+        title={t`Account settings`}
+        subtitle={t`Manage your account here.`}
       >
-        <h1>
-          <Trans>Account settings</Trans>
-        </h1>
-        <p>
-          <Trans>Manage your account here.</Trans>
-        </p>
-
         <Form
           onSubmit={isOwner ? mutationSubmitter(updateCurrentTenantMutation) : undefined}
           validationErrors={isOwner ? updateCurrentTenantMutation.error?.errors : undefined}
diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx
index 6bd59ff18..2baac3ceb 100644
--- a/application/account-management/WebApp/routes/admin/index.tsx
+++ b/application/account-management/WebApp/routes/admin/index.tsx
@@ -19,11 +19,11 @@ export default function Home() {
   return (
     <>
       <FederatedSideMenu currentSystem="account-management" />
-      <AppLayout topMenu={<TopMenu />}>
-        <h1>{userInfo?.firstName ? <Trans>Welcome home, {userInfo.firstName}</Trans> : <Trans>Welcome home</Trans>}</h1>
-        <p>
-          <Trans>Here's your overview of what's happening.</Trans>
-        </p>
+      <AppLayout
+        topMenu={<TopMenu />}
+        title={userInfo?.firstName ? t`Welcome home, ${userInfo.firstName}` : t`Welcome home`}
+        subtitle={t`Here's your overview of what's happening.`}
+      >
         <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           <Link
             to="/admin/users"
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
index 20d31e3ff..14d92ee09 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
@@ -35,7 +35,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly<U
   };
 
   return (
-    <div className="mt-4 mb-4 flex items-center justify-between gap-2">
+    <div className="-mt-5 mb-4 flex items-center justify-between gap-2 bg-background/95 pt-5 backdrop-blur-sm">
       <UserQuerying onFilterStateChange={handleFilterStateChange} onFiltersUpdated={() => onSelectedUsersChange([])} />
       <div className="mt-6 flex items-center gap-2">
         {selectedUsers.length < 2 && isOwner && (
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index a8849f39f..ee199b478 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -1,6 +1,7 @@
 import FederatedSideMenu from "@/federated-modules/sideMenu/FederatedSideMenu";
 import { TopMenu } from "@/shared/components/topMenu";
 import { SortOrder, SortableUserProperties, UserRole, UserStatus, api, type components } from "@/shared/lib/api/client";
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
@@ -140,18 +141,14 @@ export default function UsersPage() {
             </Breadcrumb>
           </TopMenu>
         }
+        title={t`Users`}
+        subtitle={t`Manage your users and permissions here.`}
+        scrollAwayHeader={true}
       >
-        <div className="flex h-full min-h-[500px] flex-col">
-          <h1>
-            <Trans>Users</Trans>
-          </h1>
-          <p>
-            <Trans>Manage your users and permissions here.</Trans>
-          </p>
-
-          <div className="mb-4">
-            <UserToolbar selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
-          </div>
+        <div className="max-sm:sticky max-sm:top-12 max-sm:z-30">
+          <UserToolbar selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col">
           <UserTable
             selectedUsers={selectedUsers}
             onSelectedUsersChange={setSelectedUsers}
diff --git a/application/back-office/WebApp/routes/back-office/index.tsx b/application/back-office/WebApp/routes/back-office/index.tsx
index c798ffdd5..f2bd94eb2 100644
--- a/application/back-office/WebApp/routes/back-office/index.tsx
+++ b/application/back-office/WebApp/routes/back-office/index.tsx
@@ -1,5 +1,5 @@
 import { TopMenu } from "@/shared/components/topMenu";
-import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
 import { createFileRoute } from "@tanstack/react-router";
 import FederatedSideMenu from "account-management/FederatedSideMenu";
@@ -12,16 +12,12 @@ export default function Home() {
   return (
     <>
       <FederatedSideMenu currentSystem="back-office" />
-      <AppLayout topMenu={<TopMenu />}>
-        <h1>
-          <Trans>Welcome to the Back Office</Trans>
-        </h1>
-        <p>
-          <Trans>
-            Manage tenants, view system data, see exceptions, and perform various tasks for operational and support
-            teams.
-          </Trans>
-        </p>
+      <AppLayout
+        topMenu={<TopMenu />}
+        title={t`Welcome to the Back Office`}
+        subtitle={t`Manage tenants, view system data, see exceptions, and perform various tasks for operational and support teams.`}
+      >
+        <div />
       </AppLayout>
     </>
   );
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index 5dfa887e8..f02da34f4 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -1,5 +1,5 @@
-import type React from "react";
-import { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "../cn";
 import { useSideMenuLayout } from "../hooks/useSideMenuLayout";
 
 type AppLayoutVariant = "full" | "center";
@@ -11,6 +11,9 @@ type AppLayoutProps = {
   maxWidth?: string;
   sidePane?: React.ReactNode;
   paddingBottom?: string;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  scrollAwayHeader?: boolean;
 };
 
 /**
@@ -30,18 +33,9 @@ type AppLayoutProps = {
  * - full: Content takes full width with standard padding
  * - center: Content is always centered with configurable max width (default: 640px)
  */
-export function AppLayout({
-  children,
-  topMenu,
-  variant = "full",
-  maxWidth = "640px",
-  sidePane
-}: Readonly<AppLayoutProps>) {
-  const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout();
-
-  // Prevent body scroll when overlay is open
+function useBodyScrollLock(isLocked: boolean) {
   useEffect(() => {
-    if (isOverlayOpen) {
+    if (isLocked) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "";
@@ -50,7 +44,212 @@ export function AppLayout({
     return () => {
       document.body.style.overflow = "";
     };
-  }, [isOverlayOpen]);
+  }, [isLocked]);
+}
+
+function useStickyHeader(enabled: boolean, headerRef: React.RefObject<HTMLDivElement | null>) {
+  const [isSticky, setIsSticky] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const threshold = 0.1;
+
+    observerRef.current = new IntersectionObserver(
+      ([entry]) => {
+        setIsSticky(!entry.isIntersecting);
+      },
+      {
+        threshold,
+        rootMargin: "-60px 0px 0px 0px"
+      }
+    );
+
+    if (headerRef.current) {
+      observerRef.current.observe(headerRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [enabled, headerRef]);
+
+  return isSticky;
+}
+
+function useScrollAwayHeader(enabled: boolean, contentRef: React.RefObject<HTMLDivElement | null>) {
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const headerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !contentRef.current) {
+      return;
+    }
+
+    const updateHeaderHeight = () => {
+      const header = contentRef.current?.querySelector(".scroll-away-header") as HTMLDivElement;
+      if (header) {
+        headerRef.current = header;
+        // Only count the header height, not the entire content
+        const headerContent = header.querySelector(".mb-4") as HTMLDivElement;
+        setHeaderHeight(headerContent ? headerContent.offsetHeight : header.offsetHeight);
+      }
+    };
+
+    const handleScroll = () => {
+      if (!contentRef.current || !headerRef.current) {
+        return;
+      }
+
+      const scrollTop = contentRef.current.scrollTop;
+      const maxScroll = Math.max(headerHeight - 60, 0); // Leave 60px for sticky header
+      const progress = maxScroll > 0 ? Math.min(scrollTop / maxScroll, 1) : 0;
+
+      setScrollProgress(progress);
+    };
+
+    updateHeaderHeight();
+    window.addEventListener("resize", updateHeaderHeight);
+
+    const scrollElement = contentRef.current;
+    scrollElement.addEventListener("scroll", handleScroll);
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("resize", updateHeaderHeight);
+      scrollElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [enabled, contentRef, headerHeight]);
+
+  return { scrollProgress, isFullyScrolled: scrollProgress >= 1 };
+}
+
+interface HeaderContentProps {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  isSticky: boolean;
+}
+
+const HeaderContent = React.forwardRef<HTMLDivElement, HeaderContentProps>(({ title, subtitle, isSticky }, ref) => (
+  <div ref={ref} className="mb-4">
+    <h1
+      className={cn(
+        "font-semibold text-3xl",
+        "transition-opacity duration-200",
+        isSticky ? "opacity-0 sm:opacity-100" : "opacity-100"
+      )}
+    >
+      {title}
+    </h1>
+    {subtitle && (
+      <p
+        className={cn(
+          "mt-2 text-muted-foreground",
+          "transition-opacity duration-200",
+          isSticky ? "opacity-0 sm:opacity-100" : "opacity-100"
+        )}
+      >
+        {subtitle}
+      </p>
+    )}
+  </div>
+));
+
+HeaderContent.displayName = "HeaderContent";
+
+interface ScrollAwayContentProps {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  scrollProgress: number;
+  headerRef: React.RefObject<HTMLDivElement | null>;
+  children: React.ReactNode;
+}
+
+function ScrollAwayContent({ title, subtitle, scrollProgress, headerRef, children }: ScrollAwayContentProps) {
+  return (
+    <>
+      {/* Mobile version with scroll-away header */}
+      <div className="flex h-full flex-col sm:hidden">
+        <div
+          className="scroll-away-header"
+          style={{
+            transform: `translateY(-${scrollProgress * 100}%)`,
+            opacity: 1 - scrollProgress
+          }}
+        >
+          <div className="mb-4">
+            <h1 className="font-semibold text-3xl">{title}</h1>
+            {subtitle && <p className="mt-2 text-muted-foreground">{subtitle}</p>}
+          </div>
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      </div>
+
+      {/* Desktop version - no scroll away behavior */}
+      <div className="hidden sm:flex sm:h-full sm:flex-col">
+        <div ref={headerRef} className="mb-4">
+          <h1 className="font-semibold text-3xl">{title}</h1>
+          {subtitle && <p className="mt-2 text-muted-foreground">{subtitle}</p>}
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      </div>
+    </>
+  );
+}
+
+interface StandardContentProps {
+  variant: AppLayoutVariant;
+  maxWidth: string;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  headerRef: React.RefObject<HTMLDivElement | null>;
+  isSticky: boolean;
+  children: React.ReactNode;
+}
+
+function StandardContent({ variant, maxWidth, title, subtitle, headerRef, isSticky, children }: StandardContentProps) {
+  if (variant === "center") {
+    return (
+      <div className="flex h-full w-full flex-col items-center">
+        <div className="flex h-full w-full flex-col" style={{ maxWidth }}>
+          {title && <HeaderContent ref={headerRef} title={title} subtitle={subtitle} isSticky={isSticky} />}
+          <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {title && <HeaderContent ref={headerRef} title={title} subtitle={subtitle} isSticky={isSticky} />}
+      <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+    </div>
+  );
+}
+
+export function AppLayout({
+  children,
+  topMenu,
+  variant = "full",
+  maxWidth = "640px",
+  sidePane,
+  title,
+  subtitle,
+  scrollAwayHeader = false
+}: Readonly<AppLayoutProps>) {
+  const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout();
+  const headerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useBodyScrollLock(isOverlayOpen);
+  const isSticky = useStickyHeader(!!title && !scrollAwayHeader, headerRef);
+  const { scrollProgress, isFullyScrolled } = useScrollAwayHeader(scrollAwayHeader && !!title, contentRef);
 
   return (
     <div className="flex h-full flex-col">
@@ -65,6 +264,26 @@ export function AppLayout({
         className={`${className} ${sidePane ? "grid grid-cols-[1fr_384px] sm:grid" : "flex flex-col"} h-full overflow-hidden`}
         style={style}
       >
+        {/* Mobile sticky header - shown differently based on scroll mode */}
+        {title && (
+          <div
+            className={cn(
+              "fixed top-0 right-0 left-0 z-40 border-border border-b bg-background/95 px-4 py-3 backdrop-blur-sm",
+              "flex flex-col items-center justify-center text-center sm:hidden",
+              "transform transition-all duration-200",
+              scrollAwayHeader
+                ? isFullyScrolled
+                  ? "translate-y-0 opacity-100"
+                  : "-translate-y-full opacity-0"
+                : isSticky
+                  ? "translate-y-0 opacity-100"
+                  : "-translate-y-full opacity-0"
+            )}
+            aria-hidden={scrollAwayHeader ? !isFullyScrolled : !isSticky}
+          >
+            <div className="max-w-[80%] truncate font-medium text-sm">{title}</div>
+          </div>
+        )}
         {/* Fixed TopMenu with blur effect - contains breadcrumbs and secondary functions */}
         <div
           role="complementary"
@@ -78,8 +297,9 @@ export function AppLayout({
 
         {/* Main content area */}
         <main
+          ref={contentRef}
           className={
-            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pb-4 transition-all duration-100 ease-in-out supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))] sm:pt-28"
+            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pt-4 pb-4 transition-all duration-100 ease-in-out supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))] sm:pt-28"
           }
           style={{
             WebkitOverflowScrolling: "touch",
@@ -89,14 +309,21 @@ export function AppLayout({
           aria-label="Main content"
           tabIndex={-1}
         >
-          {variant === "center" ? (
-            <div className="flex w-full flex-col items-center">
-              <div className="w-full" style={{ maxWidth }}>
-                {children}
-              </div>
-            </div>
+          {scrollAwayHeader && title ? (
+            <ScrollAwayContent title={title} subtitle={subtitle} scrollProgress={scrollProgress} headerRef={headerRef}>
+              {children}
+            </ScrollAwayContent>
           ) : (
-            children
+            <StandardContent
+              variant={variant}
+              maxWidth={maxWidth}
+              title={title}
+              subtitle={subtitle}
+              headerRef={headerRef}
+              isSticky={isSticky}
+            >
+              {children}
+            </StandardContent>
           )}
         </main>
 
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index 44fefc08e..6bfdc5d70 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -206,4 +206,20 @@ body {
   [role="button"] {
     -webkit-tap-highlight-color: transparent;
   }
+
+  /* Override table height for scroll-away header on mobile */
+  .scroll-away-header ~ * [aria-hidden="true"].relative.h-full.w-full {
+    height: auto !important;
+  }
+
+  .scroll-away-header ~ * [aria-hidden="true"] .absolute.top-0.right-0.bottom-0.left-0 {
+    position: relative !important;
+    inset: auto !important;
+    height: auto !important;
+  }
+
+  .scroll-away-header ~ * [aria-hidden="true"] .relative.h-full.w-full.scroll-pt-\[2\.281rem\].overflow-auto {
+    height: auto !important;
+    overflow: visible !important;
+  }
 }

From ae76c701c12639d69f7bec7fbea01ccc304fb751 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 03:34:25 +0200
Subject: [PATCH 29/37] Fix complexity in UserTable

---
 .../admin/users/-components/UserTable.tsx     | 398 ++++++++----------
 .../ui/hooks/useInfiniteScroll.ts             |  32 ++
 .../ui/hooks/useKeyboardNavigation.ts         |  23 +
 .../ui/hooks/useViewportResize.ts             |  17 +
 .../shared-webapp/ui/utils/responsive.ts      |  26 ++
 5 files changed, 276 insertions(+), 220 deletions(-)
 create mode 100644 application/shared-webapp/ui/hooks/useInfiniteScroll.ts
 create mode 100644 application/shared-webapp/ui/hooks/useKeyboardNavigation.ts
 create mode 100644 application/shared-webapp/ui/hooks/useViewportResize.ts

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 55c4ca994..61f947bb3 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -10,12 +10,15 @@ import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Pagination } from "@repo/ui/components/Pagination";
 import { Cell, Column, Row, Table, TableHeader } from "@repo/ui/components/Table";
 import { Text } from "@repo/ui/components/Text";
-import { MEDIA_QUERIES, isTouchDevice } from "@repo/ui/utils/responsive";
+import { useInfiniteScroll } from "@repo/ui/hooks/useInfiniteScroll";
+import { useKeyboardNavigation } from "@repo/ui/hooks/useKeyboardNavigation";
+import { useViewportResize } from "@repo/ui/hooks/useViewportResize";
+import { isMediumViewportOrLarger, isSmallViewportOrLarger, isTouchDevice } from "@repo/ui/utils/responsive";
 import { formatDate } from "@repo/utils/date/formatDate";
 import { getInitials } from "@repo/utils/string/getInitials";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { EllipsisVerticalIcon, SettingsIcon, Trash2Icon, UserIcon } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { Selection, SortDescriptor } from "react-aria-components";
 import { MenuTrigger, TableBody } from "react-aria-components";
 import { useInfiniteUsers } from "../-hooks/useInfiniteUsers";
@@ -31,6 +34,7 @@ interface UserTableProps {
   onUsersLoaded?: (users: UserDetails[]) => void;
 }
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Component handles complex table interactions including sorting, selection, pagination and infinite scroll
 export function UserTable({
   selectedUsers,
   onSelectedUsersChange,
@@ -49,8 +53,8 @@ export function UserTable({
     column: orderBy ?? "email",
     direction: sortOrder === "Ascending" ? "ascending" : "descending"
   }));
-  const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
-  const [isMobile, setIsMobile] = useState(!window.matchMedia(MEDIA_QUERIES.sm).matches);
+  const isKeyboardNavigation = useKeyboardNavigation();
+  const isMobile = useViewportResize();
 
   // Use regular query for desktop
   const { data: desktopUsers, isLoading: isDesktopLoading } = api.useQuery("get", "/api/account-management/users", {
@@ -126,37 +130,11 @@ export function UserTable({
   }, [onSelectedUsersChange, pageOffset]);
 
   useEffect(() => {
-    if (users?.users) {
-      onUsersLoaded?.(users.users);
+    if (users?.users && onUsersLoaded) {
+      onUsersLoaded(users.users);
     }
   }, [users?.users, onUsersLoaded]);
 
-  // Track keyboard vs mouse interaction
-  useEffect(() => {
-    const handleKeyDown = () => {
-      setIsKeyboardNavigation(true);
-    };
-
-    const handleMouseDown = () => {
-      setIsKeyboardNavigation(false);
-    };
-
-    const handlePointerDown = () => {
-      setIsKeyboardNavigation(false);
-    };
-
-    // Use capture phase to ensure we set the flag before any click handlers
-    document.addEventListener("keydown", handleKeyDown, true);
-    document.addEventListener("mousedown", handleMouseDown, true);
-    document.addEventListener("pointerdown", handlePointerDown, true);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-      document.removeEventListener("mousedown", handleMouseDown, true);
-      document.removeEventListener("pointerdown", handlePointerDown, true);
-    };
-  }, []);
-
   const handleSelectionChange = useCallback(
     (keys: Selection) => {
       if (keys === "all") {
@@ -175,11 +153,16 @@ export function UserTable({
       }
 
       // Single user selected - check if we should auto-open profile
-      const isSmallScreen = isTouchDevice() || !window.matchMedia(MEDIA_QUERIES.md).matches;
-      const shouldAutoOpen = !isSmallScreen || !isKeyboardNavigation;
+      if (isKeyboardNavigation) {
+        return; // Don't auto-open on keyboard navigation
+      }
 
-      if (shouldAutoOpen) {
-        onViewProfile(selectedUsersList[0], isKeyboardNavigation);
+      // For touch devices in single selection mode, always open profile
+      if (isTouchDevice() || !isMediumViewportOrLarger()) {
+        onViewProfile(selectedUsersList[0], false);
+      } else if (isMediumViewportOrLarger()) {
+        // For desktop, also open profile
+        onViewProfile(selectedUsersList[0], false);
       }
     },
     [users?.users, onSelectedUsersChange, onViewProfile, isKeyboardNavigation]
@@ -188,221 +171,196 @@ export function UserTable({
   // Handle Enter key to open profile
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle if focus is within the table area
+      if (e.key !== "Enter" || selectedUsers.length !== 1) {
+        return;
+      }
+
       const activeElement = document.activeElement;
       const tableContainer = document.querySelector(".min-h-0.flex-1");
+      if (!tableContainer?.contains(activeElement)) {
+        return;
+      }
 
-      if (tableContainer?.contains(activeElement)) {
-        if (e.key === "Enter" && selectedUsers.length === 1) {
-          const target = e.target as HTMLElement;
-          // Don't interfere with menu triggers or buttons
-          if (target.tagName !== "BUTTON" && !target.closest("button")) {
-            e.preventDefault();
-            e.stopPropagation();
-            onViewProfile(selectedUsers[0], true);
-          }
-        }
+      const target = e.target as HTMLElement;
+      if (target.tagName === "BUTTON" || target.closest("button")) {
+        return;
       }
+
+      e.preventDefault();
+      e.stopPropagation();
+      onViewProfile(selectedUsers[0], true);
     };
 
-    // Add the handler for all screen sizes
     document.addEventListener("keydown", handleKeyDown, true);
     return () => {
       document.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [selectedUsers, onViewProfile]);
 
-  // Media queries for responsive columns - must be before early returns
-  const [isMinSm, setIsMinSm] = useState(window.matchMedia(MEDIA_QUERIES.sm).matches);
-  const [isMinMd, setIsMinMd] = useState(window.matchMedia(MEDIA_QUERIES.md).matches);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMinSm(window.matchMedia(MEDIA_QUERIES.sm).matches);
-      setIsMinMd(window.matchMedia(MEDIA_QUERIES.md).matches);
-      setIsMobile(!window.matchMedia(MEDIA_QUERIES.sm).matches);
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  // IntersectionObserver for infinite scroll on mobile
-  const loadMoreRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!isMobile || !loadMoreRef.current) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
-          loadMore();
-        }
-      },
-      { threshold: 0.5 }
-    );
-
-    observer.observe(loadMoreRef.current);
-    return () => observer.disconnect();
-  }, [isMobile, hasMore, isLoadingMore, loadMore]);
+  // Use infinite scroll hook for mobile
+  const loadMoreRef = useInfiniteScroll({
+    enabled: isMobile,
+    hasMore,
+    isLoadingMore,
+    onLoadMore: loadMore
+  });
 
   if (isLoading) {
     return null;
   }
 
-  const currentPage = (users?.currentPageOffset ?? 0) + 1;
-  // Use single selection on touch devices regardless of screen size
-  const isSmallScreen = isTouchDevice() || !window.matchMedia(MEDIA_QUERIES.md).matches;
+  const currentPage = users ? users.currentPageOffset + 1 : 1;
 
   return (
     <>
-      <Table
-        key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
-        selectionMode={isSmallScreen ? "single" : "multiple"}
-        selectionBehavior="replace"
-        selectedKeys={new Set(selectedUsers.map((user) => user.id))}
-        onSelectionChange={handleSelectionChange}
-        sortDescriptor={sortDescriptor}
-        onSortChange={handleSortChange}
-        aria-label={t`Users`}
-        className={isMobile ? "[&>div]:h-[calc(100vh-14rem)]" : ""}
-      >
-        <TableHeader>
-          <Column
-            allowsSorting={true}
-            id={SortableUserProperties.Name}
-            isRowHeader={true}
-            minWidth={isMinSm ? 250 : undefined}
-          >
-            <Trans>Name</Trans>
-          </Column>
-          {isMinSm && (
-            <Column minWidth={160} allowsSorting={true} id={SortableUserProperties.Email}>
-              <Trans>Email</Trans>
-            </Column>
-          )}
-          {isMinMd && (
-            <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
-              <Trans>Created</Trans>
-            </Column>
-          )}
-          {isMinMd && (
-            <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
-              <Trans>Modified</Trans>
+      <div className={isMobile ? "" : "min-h-0 flex-1"}>
+        <Table
+          key={pageOffset}
+          selectionMode={isTouchDevice() || !isMediumViewportOrLarger() ? "single" : "multiple"}
+          selectionBehavior="replace"
+          selectedKeys={new Set(selectedUsers.map((user) => user.id))}
+          onSelectionChange={handleSelectionChange}
+          sortDescriptor={sortDescriptor}
+          onSortChange={handleSortChange}
+          aria-label={t`Users`}
+          className={isMobile ? "[&>div]:h-[calc(100vh-14rem)]" : ""}
+        >
+          <TableHeader>
+            <Column
+              allowsSorting={true}
+              id={SortableUserProperties.Name}
+              isRowHeader={true}
+              minWidth={isSmallViewportOrLarger() ? 250 : undefined}
+            >
+              <Trans>Name</Trans>
             </Column>
-          )}
-          {isMinSm && (
-            <Column width={135} allowsSorting={true} id={SortableUserProperties.Role}>
-              <Trans>Role</Trans>
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody>
-          {users?.users.map((user) => (
-            <Row key={user.id} id={user.id}>
-              <Cell>
-                <div className="flex h-14 w-full items-center justify-between gap-2 p-0">
-                  <div className="flex min-w-0 flex-1 items-center gap-2 text-left font-normal">
-                    <Avatar
-                      initials={getInitials(user.firstName, user.lastName, user.email)}
-                      avatarUrl={user.avatarUrl}
-                      size="sm"
-                      isRound={true}
-                    />
-                    <div className="flex min-w-0 flex-1 flex-col">
-                      <div className="flex items-center gap-2 truncate text-foreground">
-                        <span className="truncate">
-                          {user.firstName} {user.lastName}
-                        </span>
-                        {user.emailConfirmed ? null : (
-                          <Badge variant="outline" className="shrink-0">
-                            <Trans>Pending</Trans>
-                          </Badge>
-                        )}
+            {isSmallViewportOrLarger() && (
+              <Column minWidth={160} allowsSorting={true} id={SortableUserProperties.Email}>
+                <Trans>Email</Trans>
+              </Column>
+            )}
+            {isMediumViewportOrLarger() && (
+              <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
+                <Trans>Created</Trans>
+              </Column>
+            )}
+            {isMediumViewportOrLarger() && (
+              <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
+                <Trans>Modified</Trans>
+              </Column>
+            )}
+            {isSmallViewportOrLarger() && (
+              <Column width={135} allowsSorting={true} id={SortableUserProperties.Role}>
+                <Trans>Role</Trans>
+              </Column>
+            )}
+          </TableHeader>
+          <TableBody>
+            {users?.users.map((user) => (
+              <Row key={user.id} id={user.id}>
+                <Cell>
+                  <div className="flex h-14 w-full items-center justify-between gap-2 p-0">
+                    <div className="flex min-w-0 flex-1 items-center gap-2 text-left font-normal">
+                      <Avatar
+                        initials={getInitials(user.firstName, user.lastName, user.email)}
+                        avatarUrl={user.avatarUrl}
+                        size="sm"
+                        isRound={true}
+                      />
+                      <div className="flex min-w-0 flex-1 flex-col">
+                        <div className="flex items-center gap-2 truncate text-foreground">
+                          <span className="truncate">
+                            {user.firstName} {user.lastName}
+                          </span>
+                          {user.emailConfirmed ? null : (
+                            <Badge variant="outline" className="shrink-0">
+                              <Trans>Pending</Trans>
+                            </Badge>
+                          )}
+                        </div>
+                        <Text className="truncate text-muted-foreground text-sm">{user.title ?? ""}</Text>
                       </div>
-                      <Text className="truncate text-muted-foreground text-sm">{user.title ?? ""}</Text>
                     </div>
                   </div>
-                </div>
-              </Cell>
-              {isMinSm && (
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
                 </Cell>
-              )}
-              {isMinMd && (
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                    {formatDate(user.createdAt)}
-                  </Text>
-                </Cell>
-              )}
-              {isMinMd && (
-                <Cell>
-                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
-                    {formatDate(user.modifiedAt)}
-                  </Text>
-                </Cell>
-              )}
-              {isMinSm && (
-                <Cell>
-                  <div className="flex h-full w-full items-center justify-between p-0">
-                    <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
-                    <MenuTrigger
-                      onOpenChange={(isOpen) => {
-                        if (isOpen) {
-                          onSelectedUsersChange([user]);
-                        }
-                      }}
-                    >
-                      <Button variant="icon" aria-label={t`User actions`}>
-                        <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
-                      </Button>
-                      <Menu>
-                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
-                          <UserIcon className="h-4 w-4" />
-                          <Trans>View profile</Trans>
-                        </MenuItem>
-                        {userInfo?.role === "Owner" && (
-                          <>
-                            <MenuItem
-                              id="changeRole"
-                              isDisabled={user.id === userInfo?.id}
-                              onAction={() => onChangeRole(user)}
-                            >
-                              <SettingsIcon className="h-4 w-4" />
-                              <Trans>Change role</Trans>
-                            </MenuItem>
-                            <MenuSeparator />
-                            <MenuItem
-                              id="deleteUser"
-                              isDisabled={user.id === userInfo?.id}
-                              onAction={() => onDeleteUser(user)}
-                            >
-                              <Trash2Icon className="h-4 w-4 text-destructive" />
-                              <span className="text-destructive">
-                                <Trans>Delete</Trans>
-                              </span>
-                            </MenuItem>
-                          </>
-                        )}
-                      </Menu>
-                    </MenuTrigger>
-                  </div>
-                </Cell>
-              )}
-            </Row>
-          ))}
-        </TableBody>
-      </Table>
+                {isSmallViewportOrLarger() && (
+                  <Cell>
+                    <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
+                  </Cell>
+                )}
+                {isMediumViewportOrLarger() && (
+                  <Cell>
+                    <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                      {formatDate(user.createdAt)}
+                    </Text>
+                  </Cell>
+                )}
+                {isMediumViewportOrLarger() && (
+                  <Cell>
+                    <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                      {formatDate(user.modifiedAt)}
+                    </Text>
+                  </Cell>
+                )}
+                {isSmallViewportOrLarger() && (
+                  <Cell>
+                    <div className="flex h-full w-full items-center justify-between p-0">
+                      <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
+                      <MenuTrigger
+                        onOpenChange={(isOpen) => {
+                          if (isOpen) {
+                            onSelectedUsersChange([user]);
+                          }
+                        }}
+                      >
+                        <Button variant="icon" aria-label={t`User actions`}>
+                          <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
+                        </Button>
+                        <Menu>
+                          <MenuItem id="viewProfile" onAction={() => onViewProfile(user, false)}>
+                            <UserIcon className="h-4 w-4" />
+                            <Trans>View profile</Trans>
+                          </MenuItem>
+                          {userInfo?.role === "Owner" && (
+                            <>
+                              <MenuItem
+                                id="changeRole"
+                                isDisabled={user.id === userInfo?.id}
+                                onAction={() => onChangeRole(user)}
+                              >
+                                <SettingsIcon className="h-4 w-4" />
+                                <Trans>Change role</Trans>
+                              </MenuItem>
+                              <MenuSeparator />
+                              <MenuItem
+                                id="deleteUser"
+                                isDisabled={user.id === userInfo?.id}
+                                onAction={() => onDeleteUser(user)}
+                              >
+                                <Trash2Icon className="h-4 w-4 text-destructive" />
+                                <span className="text-destructive">
+                                  <Trans>Delete</Trans>
+                                </span>
+                              </MenuItem>
+                            </>
+                          )}
+                        </Menu>
+                      </MenuTrigger>
+                    </div>
+                  </Cell>
+                )}
+              </Row>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
 
       {/* Mobile: Loading indicator for infinite scroll */}
       {isMobile && <div ref={loadMoreRef} className="h-1" />}
 
       {/* Desktop: Regular pagination */}
       {!isMobile && users && (
-        <div className="bg-background pt-4">
+        <div className="flex-shrink-0 bg-background pt-4">
           <Pagination
             paginationSize={9}
             currentPage={currentPage}
diff --git a/application/shared-webapp/ui/hooks/useInfiniteScroll.ts b/application/shared-webapp/ui/hooks/useInfiniteScroll.ts
new file mode 100644
index 000000000..7190daa59
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useInfiniteScroll.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+interface UseInfiniteScrollProps {
+  enabled: boolean;
+  hasMore: boolean;
+  isLoadingMore: boolean;
+  onLoadMore: () => void;
+}
+
+export function useInfiniteScroll({ enabled, hasMore, isLoadingMore, onLoadMore }: UseInfiniteScrollProps) {
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!enabled || !loadMoreRef.current || !hasMore || isLoadingMore) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore();
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(loadMoreRef.current);
+    return () => observer.disconnect();
+  }, [enabled, hasMore, isLoadingMore, onLoadMore]);
+
+  return loadMoreRef;
+}
diff --git a/application/shared-webapp/ui/hooks/useKeyboardNavigation.ts b/application/shared-webapp/ui/hooks/useKeyboardNavigation.ts
new file mode 100644
index 000000000..6b0c418c8
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useKeyboardNavigation.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export function useKeyboardNavigation() {
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = () => setIsKeyboardNavigation(true);
+    const handlePointerInput = () => setIsKeyboardNavigation(false);
+
+    // Use capture phase to ensure we set the flag before any click handlers
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("mousedown", handlePointerInput, true);
+    document.addEventListener("pointerdown", handlePointerInput, true);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("mousedown", handlePointerInput, true);
+      document.removeEventListener("pointerdown", handlePointerInput, true);
+    };
+  }, []);
+
+  return isKeyboardNavigation;
+}
diff --git a/application/shared-webapp/ui/hooks/useViewportResize.ts b/application/shared-webapp/ui/hooks/useViewportResize.ts
new file mode 100644
index 000000000..38f363254
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useViewportResize.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { isMobileViewport } from "../utils/responsive";
+
+export function useViewportResize() {
+  const [isMobile, setIsMobile] = useState(isMobileViewport());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(isMobileViewport());
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return isMobile;
+}
diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts
index 879fd60eb..f32b93122 100644
--- a/application/shared-webapp/ui/utils/responsive.ts
+++ b/application/shared-webapp/ui/utils/responsive.ts
@@ -29,3 +29,29 @@ export const SIDE_MENU_DEFAULT_WIDTH = 288;
 export function isTouchDevice(): boolean {
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
 }
+
+// Viewport detection helpers - based on Tailwind breakpoints
+// Mobile: below 640px (sm)
+export function isMobileViewport(): boolean {
+  return !window.matchMedia(MEDIA_QUERIES.sm).matches;
+}
+
+// Small viewport and up: 640px+ (sm)
+export function isSmallViewportOrLarger(): boolean {
+  return window.matchMedia(MEDIA_QUERIES.sm).matches;
+}
+
+// Medium viewport and up: 768px+ (md)
+export function isMediumViewportOrLarger(): boolean {
+  return window.matchMedia(MEDIA_QUERIES.md).matches;
+}
+
+// Large viewport and up: 1024px+ (lg)
+export function isLargeViewportOrLarger(): boolean {
+  return window.matchMedia(MEDIA_QUERIES.lg).matches;
+}
+
+// Extra large viewport and up: 1280px+ (xl)
+export function isExtraLargeViewportOrLarger(): boolean {
+  return window.matchMedia(MEDIA_QUERIES.xl).matches;
+}

From a9721a78e926cb509af28517413eb0b9af7928c3 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 13:39:10 +0200
Subject: [PATCH 30/37] Make user table bounce on scroll for mobile screens

---
 .../WebApp/routes/admin/users/-components/UserTable.tsx     | 4 ++--
 application/shared-webapp/ui/components/AppLayout.tsx       | 6 +-----
 application/shared-webapp/ui/tailwind.css                   | 2 --
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 61f947bb3..3e7a0afc4 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -213,7 +213,7 @@ export function UserTable({
 
   return (
     <>
-      <div className={isMobile ? "" : "min-h-0 flex-1"}>
+      <div className={isMobile ? "flex-1" : "min-h-0 flex-1"}>
         <Table
           key={pageOffset}
           selectionMode={isTouchDevice() || !isMediumViewportOrLarger() ? "single" : "multiple"}
@@ -223,7 +223,7 @@ export function UserTable({
           sortDescriptor={sortDescriptor}
           onSortChange={handleSortChange}
           aria-label={t`Users`}
-          className={isMobile ? "[&>div]:h-[calc(100vh-14rem)]" : ""}
+          className={isMobile ? "[&>div>div>div]:-webkit-overflow-scrolling-touch" : ""}
         >
           <TableHeader>
             <Column
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index f02da34f4..f3e8a053c 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -299,12 +299,8 @@ export function AppLayout({
         <main
           ref={contentRef}
           className={
-            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pt-4 pb-4 transition-all duration-100 ease-in-out supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))] sm:pt-28"
+            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto p-4 pt-4 pb-4 transition-all duration-100 ease-in-out [-webkit-overflow-scrolling:touch] supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))] sm:pt-28"
           }
-          style={{
-            WebkitOverflowScrolling: "touch",
-            overscrollBehavior: "none"
-          }}
           id="main-content"
           aria-label="Main content"
           tabIndex={-1}
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index 6bfdc5d70..440dff5aa 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -160,7 +160,6 @@ html {
   right: 0;
   bottom: 0;
   overflow: hidden;
-  overscroll-behavior: none;
 }
 
 body {
@@ -174,7 +173,6 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
 }
 

From a1f80c2c388eb3413bb48c7a3ebcbe1bcc49be64 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 14:34:51 +0200
Subject: [PATCH 31/37] Align theme selector menu to the right on mobile

---
 .../WebApp/federated-modules/common/ThemeModeSelector.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx b/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx
index 529f77ed4..6fd4cb433 100644
--- a/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx
+++ b/application/account-management/WebApp/federated-modules/common/ThemeModeSelector.tsx
@@ -175,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 ? (

From bca6f45f326eb1b66127f7fe1c26d98fecd97fb5 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 14:50:46 +0200
Subject: [PATCH 32/37] Add directional scroll locking for tables on touch
 devices

---
 .../shared-webapp/ui/components/Table.tsx     | 82 ++++++++++++++++++-
 1 file changed, 81 insertions(+), 1 deletion(-)

diff --git a/application/shared-webapp/ui/components/Table.tsx b/application/shared-webapp/ui/components/Table.tsx
index 16c8d9488..fc118f841 100644
--- a/application/shared-webapp/ui/components/Table.tsx
+++ b/application/shared-webapp/ui/components/Table.tsx
@@ -3,6 +3,7 @@
  * ref: https://ui.shadcn.com/docs/components/table
  */
 import { ArrowUp } from "lucide-react";
+import { useEffect, useRef } from "react";
 import {
   Cell as AriaCell,
   type CellProps as AriaCellProps,
@@ -23,6 +24,7 @@ import {
   useTableOptions
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
+import { isTouchDevice } from "../utils/responsive";
 import { Checkbox } from "./Checkbox";
 import { focusRing } from "./focusRing";
 import { composeTailwindRenderProps } from "./utils";
@@ -30,11 +32,89 @@ import { composeTailwindRenderProps } from "./utils";
 export { TableBody, useContextProps } from "react-aria-components";
 
 export function Table(props: Readonly<TableProps>) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    let scrollDirection: "horizontal" | "vertical" | null = null;
+    let startX = 0;
+    let startY = 0;
+    let startScrollLeft = 0;
+    let startScrollTop = 0;
+    let _touchStartTime = 0;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      startX = touch.clientX;
+      startY = touch.clientY;
+      startScrollLeft = container.scrollLeft;
+      startScrollTop = container.scrollTop;
+      _touchStartTime = Date.now();
+      scrollDirection = null;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!e.touches[0]) {
+        return;
+      }
+
+      const touch = e.touches[0];
+      const deltaX = touch.clientX - startX;
+      const deltaY = touch.clientY - startY;
+      const absDeltaX = Math.abs(deltaX);
+      const absDeltaY = Math.abs(deltaY);
+
+      // Determine scroll direction on first significant movement
+      if (!scrollDirection && (absDeltaX > 5 || absDeltaY > 5)) {
+        scrollDirection = absDeltaX > absDeltaY ? "horizontal" : "vertical";
+      }
+
+      // Lock scrolling to the determined direction
+      if (scrollDirection === "horizontal") {
+        e.preventDefault();
+        container.scrollLeft = startScrollLeft - deltaX;
+      } else if (scrollDirection === "vertical") {
+        // Check if we can scroll vertically
+        const canScrollUp = container.scrollTop > 0;
+        const canScrollDown = container.scrollTop < container.scrollHeight - container.clientHeight;
+
+        if ((deltaY > 0 && canScrollUp) || (deltaY < 0 && canScrollDown)) {
+          e.preventDefault();
+          container.scrollTop = startScrollTop - deltaY;
+        }
+      }
+    };
+
+    const handleTouchEnd = () => {
+      scrollDirection = null;
+    };
+
+    // Only add touch event listeners on touch devices
+    if (isTouchDevice()) {
+      container.addEventListener("touchstart", handleTouchStart, { passive: false });
+      container.addEventListener("touchmove", handleTouchMove, { passive: false });
+      container.addEventListener("touchend", handleTouchEnd);
+    }
+
+    return () => {
+      if (isTouchDevice()) {
+        container.removeEventListener("touchstart", handleTouchStart);
+        container.removeEventListener("touchmove", handleTouchMove);
+        container.removeEventListener("touchend", handleTouchEnd);
+      }
+    };
+  }, []);
+
   return (
     <div className="relative h-full w-full" aria-hidden={true}>
       <div className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden" aria-hidden={true}>
         <ResizableTableContainer
-          className="relative h-full w-full scroll-pt-[2.281rem] overflow-auto rounded-md"
+          ref={scrollContainerRef}
+          className="relative h-full w-full touch-pan-x touch-pan-y scroll-pt-[2.281rem] overflow-auto rounded-md"
           aria-hidden={true}
         >
           <AriaTable {...props} className="border-separate border-spacing-0" />

From 680a040cc9bef4963161ca56fe4bfca72ac36d14 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 16:13:47 +0200
Subject: [PATCH 33/37] Disable horizontal scrolling on mobile tables when side
 panel is open

---
 .../admin/users/-components/UserTable.tsx     |  5 +-
 .../WebApp/routes/admin/users/index.tsx       |  1 +
 .../shared-webapp/ui/components/Table.tsx     | 90 +++----------------
 .../shared-webapp/ui/hooks/useAxisLock.ts     | 80 +++++++++++++++++
 4 files changed, 96 insertions(+), 80 deletions(-)
 create mode 100644 application/shared-webapp/ui/hooks/useAxisLock.ts

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 3e7a0afc4..8ed038b28 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -32,6 +32,7 @@ interface UserTableProps {
   onDeleteUser: (user: UserDetails) => void;
   onChangeRole: (user: UserDetails) => void;
   onUsersLoaded?: (users: UserDetails[]) => void;
+  isProfileOpen?: boolean;
 }
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Component handles complex table interactions including sorting, selection, pagination and infinite scroll
@@ -41,7 +42,8 @@ export function UserTable({
   onViewProfile,
   onDeleteUser,
   onChangeRole,
-  onUsersLoaded
+  onUsersLoaded,
+  isProfileOpen
 }: Readonly<UserTableProps>) {
   const navigate = useNavigate();
   const { search, userRole, userStatus, startDate, endDate, orderBy, sortOrder, pageOffset } = useSearch({
@@ -224,6 +226,7 @@ export function UserTable({
           onSortChange={handleSortChange}
           aria-label={t`Users`}
           className={isMobile ? "[&>div>div>div]:-webkit-overflow-scrolling-touch" : ""}
+          disableHorizontalScroll={isProfileOpen}
         >
           <TableHeader>
             <Column
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index ee199b478..0dc9f293e 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -156,6 +156,7 @@ export default function UsersPage() {
             onDeleteUser={handleDeleteUser}
             onChangeRole={handleChangeRole}
             onUsersLoaded={handleUsersLoaded}
+            isProfileOpen={!!profileUser}
           />
         </div>
       </AppLayout>
diff --git a/application/shared-webapp/ui/components/Table.tsx b/application/shared-webapp/ui/components/Table.tsx
index fc118f841..99ad3c726 100644
--- a/application/shared-webapp/ui/components/Table.tsx
+++ b/application/shared-webapp/ui/components/Table.tsx
@@ -3,7 +3,6 @@
  * ref: https://ui.shadcn.com/docs/components/table
  */
 import { ArrowUp } from "lucide-react";
-import { useEffect, useRef } from "react";
 import {
   Cell as AriaCell,
   type CellProps as AriaCellProps,
@@ -24,6 +23,7 @@ import {
   useTableOptions
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
+import { useAxisLock } from "../hooks/useAxisLock";
 import { isTouchDevice } from "../utils/responsive";
 import { Checkbox } from "./Checkbox";
 import { focusRing } from "./focusRing";
@@ -31,90 +31,22 @@ import { composeTailwindRenderProps } from "./utils";
 
 export { TableBody, useContextProps } from "react-aria-components";
 
-export function Table(props: Readonly<TableProps>) {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    let scrollDirection: "horizontal" | "vertical" | null = null;
-    let startX = 0;
-    let startY = 0;
-    let startScrollLeft = 0;
-    let startScrollTop = 0;
-    let _touchStartTime = 0;
-
-    const handleTouchStart = (e: TouchEvent) => {
-      const touch = e.touches[0];
-      startX = touch.clientX;
-      startY = touch.clientY;
-      startScrollLeft = container.scrollLeft;
-      startScrollTop = container.scrollTop;
-      _touchStartTime = Date.now();
-      scrollDirection = null;
-    };
-
-    const handleTouchMove = (e: TouchEvent) => {
-      if (!e.touches[0]) {
-        return;
-      }
-
-      const touch = e.touches[0];
-      const deltaX = touch.clientX - startX;
-      const deltaY = touch.clientY - startY;
-      const absDeltaX = Math.abs(deltaX);
-      const absDeltaY = Math.abs(deltaY);
-
-      // Determine scroll direction on first significant movement
-      if (!scrollDirection && (absDeltaX > 5 || absDeltaY > 5)) {
-        scrollDirection = absDeltaX > absDeltaY ? "horizontal" : "vertical";
-      }
-
-      // Lock scrolling to the determined direction
-      if (scrollDirection === "horizontal") {
-        e.preventDefault();
-        container.scrollLeft = startScrollLeft - deltaX;
-      } else if (scrollDirection === "vertical") {
-        // Check if we can scroll vertically
-        const canScrollUp = container.scrollTop > 0;
-        const canScrollDown = container.scrollTop < container.scrollHeight - container.clientHeight;
-
-        if ((deltaY > 0 && canScrollUp) || (deltaY < 0 && canScrollDown)) {
-          e.preventDefault();
-          container.scrollTop = startScrollTop - deltaY;
-        }
-      }
-    };
-
-    const handleTouchEnd = () => {
-      scrollDirection = null;
-    };
-
-    // Only add touch event listeners on touch devices
-    if (isTouchDevice()) {
-      container.addEventListener("touchstart", handleTouchStart, { passive: false });
-      container.addEventListener("touchmove", handleTouchMove, { passive: false });
-      container.addEventListener("touchend", handleTouchEnd);
-    }
+interface ExtendedTableProps extends TableProps {
+  disableHorizontalScroll?: boolean;
+}
 
-    return () => {
-      if (isTouchDevice()) {
-        container.removeEventListener("touchstart", handleTouchStart);
-        container.removeEventListener("touchmove", handleTouchMove);
-        container.removeEventListener("touchend", handleTouchEnd);
-      }
-    };
-  }, []);
+export function Table({ disableHorizontalScroll, ...props }: Readonly<ExtendedTableProps>) {
+  const scrollRef = useAxisLock<HTMLDivElement>();
+  const isMobile = isTouchDevice();
 
   return (
     <div className="relative h-full w-full" aria-hidden={true}>
       <div className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden" aria-hidden={true}>
         <ResizableTableContainer
-          ref={scrollContainerRef}
-          className="relative h-full w-full touch-pan-x touch-pan-y scroll-pt-[2.281rem] overflow-auto rounded-md"
+          ref={scrollRef}
+          className={`relative h-full w-full scroll-pt-[2.281rem] overflow-auto rounded-md ${
+            disableHorizontalScroll && isMobile ? "overflow-x-hidden" : ""
+          }`}
           aria-hidden={true}
         >
           <AriaTable {...props} className="border-separate border-spacing-0" />
diff --git a/application/shared-webapp/ui/hooks/useAxisLock.ts b/application/shared-webapp/ui/hooks/useAxisLock.ts
new file mode 100644
index 000000000..0fd44c6b5
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useAxisLock.ts
@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+
+export function useAxisLock<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+
+    let startX = 0;
+    let startY = 0;
+    let isLocked = false;
+    const threshold = 10; // pixels before locking
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (e.pointerType !== "touch") {
+        return;
+      }
+
+      startX = e.clientX;
+      startY = e.clientY;
+      isLocked = false;
+
+      // Start with both directions allowed
+      element.style.touchAction = "pan-x pan-y";
+    };
+
+    const handlePointerMove = (e: PointerEvent) => {
+      if (e.pointerType !== "touch" || isLocked) {
+        return;
+      }
+
+      const deltaX = Math.abs(e.clientX - startX);
+      const deltaY = Math.abs(e.clientY - startY);
+
+      // Lock to axis after threshold
+      if (deltaX > threshold || deltaY > threshold) {
+        if (deltaX > deltaY) {
+          // Lock to horizontal
+          element.style.touchAction = "pan-x";
+        } else {
+          // Lock to vertical
+          element.style.touchAction = "pan-y";
+        }
+        isLocked = true;
+      }
+    };
+
+    const handlePointerUp = () => {
+      // Reset for next gesture
+      element.style.touchAction = "pan-x pan-y";
+      isLocked = false;
+    };
+
+    // Set initial styles
+    element.style.touchAction = "pan-x pan-y";
+    element.style.overscrollBehavior = "contain";
+
+    // Use pointer events for better performance
+    element.addEventListener("pointerdown", handlePointerDown);
+    element.addEventListener("pointermove", handlePointerMove);
+    element.addEventListener("pointerup", handlePointerUp);
+    element.addEventListener("pointercancel", handlePointerUp);
+
+    return () => {
+      element.removeEventListener("pointerdown", handlePointerDown);
+      element.removeEventListener("pointermove", handlePointerMove);
+      element.removeEventListener("pointerup", handlePointerUp);
+      element.removeEventListener("pointercancel", handlePointerUp);
+
+      // Clean up styles
+      element.style.touchAction = "";
+      element.style.overscrollBehavior = "";
+    };
+  }, []);
+
+  return ref;
+}

From c5cd9f04f5bc2b21a992559973366c1a6d0b2552 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Sun, 27 Jul 2025 16:27:34 +0200
Subject: [PATCH 34/37] Fix mobile menu click-through issue by adding touch
 event handling and delays

---
 .../federated-modules/sideMenu/MobileMenu.tsx | 64 ++++++++-----
 .../shared-webapp/ui/components/SideMenu.tsx  | 90 ++++++++++++-------
 2 files changed, 98 insertions(+), 56 deletions(-)

diff --git a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
index bf8713e0d..74227f2db 100644
--- a/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
+++ b/application/account-management/WebApp/federated-modules/sideMenu/MobileMenu.tsx
@@ -49,14 +49,22 @@ function MobileMenuHeader({ onEditProfile }: { onEditProfile: () => void }) {
             <div className="shrink-0" style={{ position: "relative", zIndex: 1000 }}>
               <button
                 type="button"
-                onClick={() => {
-                  onEditProfile();
-                  if (overlayCtx?.isOpen) {
-                    overlayCtx.close();
-                  }
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setTimeout(() => {
+                    onEditProfile();
+                    if (overlayCtx?.isOpen) {
+                      overlayCtx.close();
+                    }
+                  }, 10);
+                }}
+                onTouchEnd={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
                 }}
                 className="rounded border border-border bg-background px-2 py-1 text-sm hover:bg-hover-background"
-                style={{ pointerEvents: "auto", position: "relative" }}
+                style={{ pointerEvents: "auto", position: "relative", touchAction: "none" }}
               >
                 <UserIcon className="mr-1 inline h-4 w-4" />
                 <Trans>Edit</Trans>
@@ -70,14 +78,16 @@ function MobileMenuHeader({ onEditProfile }: { onEditProfile: () => void }) {
           <Button
             variant="ghost"
             onPress={() => {
-              // Close mobile menu if it's open
-              if (overlayCtx?.isOpen) {
-                overlayCtx.close();
-              }
-              logoutMutation.mutate({});
+              setTimeout(() => {
+                // Close mobile menu if it's open
+                if (overlayCtx?.isOpen) {
+                  overlayCtx.close();
+                }
+                logoutMutation.mutate({});
+              }, 10);
             }}
             className="flex h-11 w-full items-center justify-start gap-4 px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
-            style={{ pointerEvents: "auto" }}
+            style={{ pointerEvents: "auto", touchAction: "none" }}
           >
             <div className="flex h-6 w-6 shrink-0 items-center justify-center">
               <LogOutIcon className="h-5 w-5 stroke-current" />
@@ -93,10 +103,13 @@ function MobileMenuHeader({ onEditProfile }: { onEditProfile: () => void }) {
           <ThemeModeSelector
             variant="mobile-menu"
             onAction={() => {
-              // Close mobile menu if it's open
-              if (overlayCtx?.isOpen) {
-                overlayCtx.close();
-              }
+              // Small delay to ensure touch events are fully processed
+              setTimeout(() => {
+                // Close mobile menu if it's open
+                if (overlayCtx?.isOpen) {
+                  overlayCtx.close();
+                }
+              }, 10);
             }}
           />
         </div>
@@ -106,10 +119,13 @@ function MobileMenuHeader({ onEditProfile }: { onEditProfile: () => void }) {
           <LocaleSwitcher
             variant="mobile-menu"
             onAction={() => {
-              // Close mobile menu if it's open
-              if (overlayCtx?.isOpen) {
-                overlayCtx.close();
-              }
+              // Small delay to ensure touch events are fully processed
+              setTimeout(() => {
+                // Close mobile menu if it's open
+                if (overlayCtx?.isOpen) {
+                  overlayCtx.close();
+                }
+              }, 10);
             }}
           />
         </div>
@@ -120,7 +136,7 @@ function MobileMenuHeader({ onEditProfile }: { onEditProfile: () => void }) {
             <Button
               variant="ghost"
               className="flex h-11 w-full items-center justify-start gap-4 px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
-              style={{ pointerEvents: "auto" }}
+              style={{ pointerEvents: "auto", touchAction: "none" }}
             >
               <div className="flex h-6 w-6 shrink-0 items-center justify-center">
                 <MailQuestion className="h-5 w-5 stroke-current" />
@@ -142,7 +158,11 @@ export function MobileMenu({
   onEditProfile
 }: Readonly<{ currentSystem: FederatedSideMenuProps["currentSystem"]; onEditProfile: () => void }>) {
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div
+      className="flex h-full flex-col overflow-hidden"
+      onTouchStart={(e) => e.stopPropagation()}
+      style={{ touchAction: "pan-y" }}
+    >
       <div className="flex-1 overflow-y-auto overflow-x-hidden">
         <MobileMenuHeader onEditProfile={onEditProfile} />
 
diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index bca1462c3..96310434f 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -191,11 +191,7 @@ export function MenuButton({ icon: Icon, label, href: to, isDisabled = false, ..
     }
   };
 
-  const handlePress = () => {
-    if (isDisabled) {
-      return;
-    }
-
+  const navigateWithDelay = useCallback(() => {
     // Auto-close overlay after navigation
     if (overlayCtx?.isOpen) {
       overlayCtx.close();
@@ -222,6 +218,15 @@ export function MenuButton({ icon: Icon, label, href: to, isDisabled = false, ..
     else if (forceReload) {
       window.location.href = to;
     }
+  }, [overlayCtx, federatedNavigation, forceReload, router, to]);
+
+  const handlePress = () => {
+    if (isDisabled) {
+      return;
+    }
+
+    // Small delay to ensure touch events are fully processed
+    setTimeout(navigateWithDelay, 10);
   };
 
   // For collapsed menu, wrap in TooltipTrigger
@@ -335,20 +340,23 @@ export function FederatedMenuButton({
                 return;
               }
 
-              // Auto-close overlay after navigation
-              if (overlayCtx?.isOpen) {
-                overlayCtx.close();
-              }
-
-              if (isCurrentSystem) {
-                // Same system - use programmatic navigation
-                window.history.pushState({}, "", to);
-                // Dispatch a popstate event using the standard Event constructor
-                window.dispatchEvent(new Event("popstate"));
-              } else {
-                // Different system - force reload
-                window.location.href = to;
-              }
+              // Small delay to ensure touch events are fully processed
+              setTimeout(() => {
+                // Auto-close overlay after navigation
+                if (overlayCtx?.isOpen) {
+                  overlayCtx.close();
+                }
+
+                if (isCurrentSystem) {
+                  // Same system - use programmatic navigation
+                  window.history.pushState({}, "", to);
+                  // Dispatch a popstate event using the standard Event constructor
+                  window.dispatchEvent(new Event("popstate"));
+                } else {
+                  // Different system - force reload
+                  window.location.href = to;
+                }
+              }, 10);
             }}
           >
             <MenuLinkContent icon={Icon} label={label} isActive={isActive} isCollapsed={isCollapsed} />
@@ -377,20 +385,23 @@ export function FederatedMenuButton({
             return;
           }
 
-          // Auto-close overlay after navigation
-          if (overlayCtx?.isOpen) {
-            overlayCtx.close();
-          }
-
-          if (isCurrentSystem) {
-            // Same system - use programmatic navigation
-            window.history.pushState({}, "", to);
-            // Dispatch a popstate event using the standard Event constructor
-            window.dispatchEvent(new Event("popstate"));
-          } else {
-            // Different system - force reload
-            window.location.href = to;
-          }
+          // Small delay to ensure touch events are fully processed
+          setTimeout(() => {
+            // Auto-close overlay after navigation
+            if (overlayCtx?.isOpen) {
+              overlayCtx.close();
+            }
+
+            if (isCurrentSystem) {
+              // Same system - use programmatic navigation
+              window.history.pushState({}, "", to);
+              // Dispatch a popstate event using the standard Event constructor
+              window.dispatchEvent(new Event("popstate"));
+            } else {
+              // Different system - force reload
+              window.location.href = to;
+            }
+          }, 10);
         }}
       >
         <MenuLinkContent icon={Icon} label={label} isActive={isActive} isCollapsed={isCollapsed} />
@@ -1242,6 +1253,15 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
             style={{ margin: 0, padding: 0, border: "none", display: "flex" }}
             aria-label="Mobile navigation menu"
             open={true}
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => e.stopPropagation()}
+            onTouchMove={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setIsOpen(false);
+              }
+            }}
           >
             <nav
               className="flex h-full w-full flex-col bg-background"
@@ -1256,8 +1276,10 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
                   paddingLeft: "12px",
                   paddingRight: "12px",
                   pointerEvents: "auto",
-                  WebkitOverflowScrolling: "touch"
+                  WebkitOverflowScrolling: "touch",
+                  touchAction: "pan-y"
                 }}
+                onTouchStart={(e) => e.stopPropagation()}
               >
                 {topMenuContent && <div className="pt-5">{topMenuContent}</div>}
               </div>

From 84e0594d4ef1005c1e70243ded8f7d7c5eaa7f85 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Mon, 28 Jul 2025 01:15:51 +0200
Subject: [PATCH 35/37] Show email for users without name on mobile screen
 sizes in the user table

---
 .../WebApp/routes/admin/users/-components/UserTable.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index 8ed038b28..9bf8e6d2a 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -273,7 +273,11 @@ export function UserTable({
                       <div className="flex min-w-0 flex-1 flex-col">
                         <div className="flex items-center gap-2 truncate text-foreground">
                           <span className="truncate">
-                            {user.firstName} {user.lastName}
+                            {user.firstName || user.lastName
+                              ? `${user.firstName} ${user.lastName}`.trim()
+                              : !isSmallViewportOrLarger()
+                                ? user.email
+                                : ""}
                           </span>
                           {user.emailConfirmed ? null : (
                             <Badge variant="outline" className="shrink-0">

From 72de77de26a79872492c528643c4b1884ac14d56 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Mon, 28 Jul 2025 01:19:21 +0200
Subject: [PATCH 36/37] Simplify user profile side pane accessibility label and
 remove redundant translations

---
 .../routes/admin/users/-components/UserProfileSidePane.tsx  | 6 +++---
 .../WebApp/shared/translations/locale/da-DK.po              | 3 ---
 .../WebApp/shared/translations/locale/en-US.po              | 3 ---
 .../WebApp/shared/translations/locale/nl-NL.po              | 3 ---
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
index 8cde0049d..281988b22 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -249,10 +249,10 @@ export function UserProfileSidePane({
       {isSmallScreen && <div className="fixed inset-0 z-[59] bg-black/50" aria-hidden="true" />}
 
       {/* Side pane */}
-      <aside
+      <div
         ref={sidePaneRef}
         className="relative z-[60] flex h-full w-full flex-col border-border border-l bg-background"
-        aria-label={t`User profile details`}
+        aria-label={t`User profile`}
       >
         {/* Close button - positioned like modal dialogs */}
         <XIcon
@@ -334,7 +334,7 @@ export function UserProfileSidePane({
             </Button>
           </div>
         )}
-      </aside>
+      </div>
 
       {/* Change User Role Dialog */}
       {user && (
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po
index 66ce31610..00fa6ed3e 100644
--- a/application/account-management/WebApp/shared/translations/locale/da-DK.po
+++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po
@@ -426,9 +426,6 @@ msgstr "Bruger ikke i nuværende visning"
 msgid "User profile"
 msgstr "Brugerprofil"
 
-msgid "User profile details"
-msgstr "Brugerprofiloplysninger"
-
 msgid "User profile menu"
 msgstr "Brugerprofilmenu"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po
index 9a36de3ef..9485ec860 100644
--- a/application/account-management/WebApp/shared/translations/locale/en-US.po
+++ b/application/account-management/WebApp/shared/translations/locale/en-US.po
@@ -426,9 +426,6 @@ msgstr "User not in current view"
 msgid "User profile"
 msgstr "User profile"
 
-msgid "User profile details"
-msgstr "User profile details"
-
 msgid "User profile menu"
 msgstr "User profile menu"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
index 31b65b0a2..9e9f1512f 100644
--- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po
+++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
@@ -426,9 +426,6 @@ msgstr "Gebruiker niet in huidige weergave"
 msgid "User profile"
 msgstr "Gebruikersprofiel"
 
-msgid "User profile details"
-msgstr "Details van gebruikersprofiel"
-
 msgid "User profile menu"
 msgstr "Gebruikersprofielmenu"
 

From 4ad3774cdf0f057455ee2ea79b79f1fd1d6bc324 Mon Sep 17 00:00:00 2001
From: Thomas Jespersen <tje@platformplatform.net>
Date: Mon, 28 Jul 2025 22:35:57 +0200
Subject: [PATCH 37/37] Fix focus ring clipping in dialog components

---
 application/shared-webapp/ui/components/DialogFooter.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/application/shared-webapp/ui/components/DialogFooter.tsx b/application/shared-webapp/ui/components/DialogFooter.tsx
index b16fd3c82..af50aa29c 100644
--- a/application/shared-webapp/ui/components/DialogFooter.tsx
+++ b/application/shared-webapp/ui/components/DialogFooter.tsx
@@ -16,7 +16,7 @@ export function DialogFooter({ children, className }: Readonly<DialogFooterProps
   return (
     <div
       className={twMerge(
-        "mt-8 flex justify-end gap-4",
+        "mt-8 flex justify-end gap-4 px-1", // Added px-1 to align with DialogContent padding
         "max-sm:fixed max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:mt-0 max-sm:border-border max-sm:border-t max-sm:bg-background max-sm:p-4 max-sm:shadow-lg",
         "max-sm:supports-[padding:max(0px)]:pb-[max(1rem,env(safe-area-inset-bottom))]",
         className
@@ -41,6 +41,7 @@ export function DialogContent({ children, className }: Readonly<{ children: Reac
     <div
       className={twMerge(
         "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+        "p-1", // Add padding to prevent focus ring clipping
         "max-sm:pb-20", // Add padding to account for fixed footer on mobile
         "max-sm:supports-[padding:max(0px)]:pb-[calc(5rem+env(safe-area-inset-bottom))]", // Adjust for safe area
         "-webkit-overflow-scrolling-touch",