From 58ed75eafc89cd9a78b3c9b017f39a7d9de195cd Mon Sep 17 00:00:00 2001
From: Abhimanyu Saharan <desk.abhimanyu@gmail.com>
Date: Thu, 12 Feb 2026 07:58:20 +0000
Subject: [PATCH] feat(agents): improve mobile table layout + responsive
 columns

---
 frontend/src/app/agents/page.tsx               |  2 +-
 frontend/src/components/agents/AgentsTable.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/agents/page.tsx b/frontend/src/app/agents/page.tsx
index fdffc915..bca3d586 100644
--- a/frontend/src/app/agents/page.tsx
+++ b/frontend/src/app/agents/page.tsx
@@ -142,7 +142,7 @@ export default function AgentsPage() {
         adminOnlyMessage="Only organization owners and admins can access agents."
         stickyHeader
       >
-        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="max-w-full overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
           <AgentsTable
             agents={agents}
             boards={boards}
diff --git a/frontend/src/components/agents/AgentsTable.tsx b/frontend/src/components/agents/AgentsTable.tsx
index 9123ad8e..3766ede4 100644
--- a/frontend/src/components/agents/AgentsTable.tsx
+++ b/frontend/src/components/agents/AgentsTable.tsx
@@ -118,9 +118,9 @@ export function AgentsTable({
       },
       {
         accessorKey: "openclaw_session_id",
-        header: "Session",
+        header: <span className="hidden sm:inline">Session</span>,
         cell: ({ row }) => (
-          <span className="text-sm text-slate-700">
+          <span className="hidden text-sm text-slate-700 sm:inline">
             {truncate(row.original.openclaw_session_id)}
           </span>
         ),
@@ -149,8 +149,12 @@ export function AgentsTable({
       },
       {
         accessorKey: "updated_at",
-        header: "Updated",
-        cell: ({ row }) => dateCell(row.original.updated_at),
+        header: <span className="hidden md:inline">Updated</span>,
+        cell: ({ row }) => (
+          <span className="hidden md:inline">
+            {dateCell(row.original.updated_at)}
+          </span>
+        ),
       },
     ];
 
@@ -187,7 +191,7 @@ export function AgentsTable({
           : undefined
       }
       rowClassName="hover:bg-slate-50"
-      cellClassName="px-6 py-4"
+      cellClassName="px-3 py-3 sm:px-6 sm:py-4"
       emptyState={
         emptyState
           ? {