From 91b702e2391abe27fdf9721dbc7c9e6c530e3e58 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Aug 2026 13:19:10 +0000
Subject: [PATCH] Fix squeezed Active Users header on mobile

The presence page header was a non-wrapping `flex justify-between`, so on a
phone viewport the title column was compressed to a few characters wide and
"Active Users" plus its description broke one or two words per line next to
the Window/Refresh controls.

Stack the title and controls vertically below the `sm` breakpoint and keep
the existing side-by-side row from `sm` up. The controls also wrap among
themselves on very narrow screens.

The user table had the same problem: its card used `overflow-hidden`, which
clipped the Tenant and Last seen columns off-screen with no way to reach
them. Wrap the table in the repo's usual `overflow-x-auto` container so it
scrolls inside its card, keep cells on one line, and trim cell padding to
`px-4` on mobile.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwjVj2PvpVRk7QUjQf3i8C
---
 .../app/admin/presence/page.tsx               | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/Web/autopilot-monitor-web/app/admin/presence/page.tsx b/src/Web/autopilot-monitor-web/app/admin/presence/page.tsx
index 06e05393..8856c34f 100644
--- a/src/Web/autopilot-monitor-web/app/admin/presence/page.tsx
+++ b/src/Web/autopilot-monitor-web/app/admin/presence/page.tsx
@@ -111,8 +111,8 @@ export default function PresencePage() {
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <header className="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700">
         <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between">
-            <div>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="min-w-0">
               <h1 className="text-2xl font-normal text-gray-900 dark:text-white">Active Users</h1>
               <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                 Cross-tenant — web users who made a request within the selected window
@@ -121,7 +121,7 @@ export default function PresencePage() {
                 )}
               </p>
             </div>
-            <div className="flex items-center space-x-3">
+            <div className="flex flex-wrap items-center gap-3 sm:flex-nowrap sm:shrink-0">
               <label className="text-sm text-gray-600 dark:text-gray-400">Window</label>
               <select
                 value={windowMinutes}
@@ -176,38 +176,40 @@ export default function PresencePage() {
 
         {/* User list */}
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead className="bg-gray-50 dark:bg-gray-700/50">
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">User</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tenant</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last seen</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-              {users.length === 0 ? (
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700/50">
                 <tr>
-                  <td colSpan={4} className="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
-                    {loading && !data ? "Loading…" : "No users active in this window."}
-                  </td>
+                  <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">User</th>
+                  <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
+                  <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tenant</th>
+                  <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">Last seen</th>
                 </tr>
-              ) : (
-                users.map((u) => (
-                  <tr key={`${u.tenantId}-${u.upn}`} className="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
-                    <td className="px-6 py-3 text-sm font-medium text-gray-900 dark:text-white">{u.upn}</td>
-                    <td className="px-6 py-3 text-sm">
-                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${roleBadgeClass(u.userRole)}`}>
-                        {u.userRole || "Authenticated"}
-                      </span>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {users.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="px-4 sm:px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+                      {loading && !data ? "Loading…" : "No users active in this window."}
                     </td>
-                    <td className="px-6 py-3 text-sm text-gray-500 dark:text-gray-400 font-mono text-xs">{u.tenantId}</td>
-                    <td className="px-6 py-3 text-sm text-gray-600 dark:text-gray-300">{formatAgo(u.secondsAgo)}</td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
+                ) : (
+                  users.map((u) => (
+                    <tr key={`${u.tenantId}-${u.upn}`} className="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
+                      <td className="px-4 sm:px-6 py-3 text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap">{u.upn}</td>
+                      <td className="px-4 sm:px-6 py-3 text-sm">
+                        <span className={`px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap ${roleBadgeClass(u.userRole)}`}>
+                          {u.userRole || "Authenticated"}
+                        </span>
+                      </td>
+                      <td className="px-4 sm:px-6 py-3 text-sm text-gray-500 dark:text-gray-400 font-mono text-xs whitespace-nowrap">{u.tenantId}</td>
+                      <td className="px-4 sm:px-6 py-3 text-sm text-gray-600 dark:text-gray-300 whitespace-nowrap">{formatAgo(u.secondsAgo)}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
 
         <p className="text-xs text-gray-400 dark:text-gray-500">