From 2b4460622e9fecc276fd79afc77a9482f8e2ed8a Mon Sep 17 00:00:00 2001
From: janeza2 <lovekangsom.7@gmail.com>
Date: Mon, 22 Jun 2026 01:44:11 +0700
Subject: [PATCH 1/2] fix(dashboard): make API Manager table responsive on
 mobile

The registered API keys table on /dashboard/api-manager was unusable on
small screens: the 12-column grid collapsed and squeezed content, action
icons (view costs, regenerate, permissions, delete) were hidden behind
hover which doesn't exist on touch, and there was no horizontal scroll.

- Wrap both key tables (normal + quota) in overflow-x-auto so they can
  be scrolled sideways instead of collapsing.
- Add min-w-[760px] to header + row so columns keep their intended widths
  and the scroll is meaningful.
- Switch all hover-gated icons (cost/regenerate/permissions/delete + the
  'key only available at creation' info lock) to opacity-100 on mobile
  and keep the hover-reveal behavior on >=sm screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../api-manager/ApiManagerPageClient.tsx      | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
index b31e683d2c2d..35c6e785d142 100644
--- a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
@@ -918,7 +918,7 @@ export default function ApiManagerPageClient() {
               return (
                 <div
                   key={key.id}
-                  className="grid grid-cols-12 gap-4 px-4 py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 hover:bg-surface/30 transition-colors group"
+                  className="grid grid-cols-12 gap-4 px-4 py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 hover:bg-surface/30 transition-colors group min-w-[760px]"
                 >
                   <div className="col-span-2 flex items-center gap-2">
                     <span
@@ -945,7 +945,7 @@ export default function ApiManagerPageClient() {
                       </button>
                     ) : (
                       <span
-                        className="p-1 text-text-muted/40 opacity-0 group-hover:opacity-100 transition-all shrink-0 cursor-help"
+                        className="p-1 text-text-muted/40 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0 cursor-help"
                         title={t("keyOnlyAvailableAtCreation")}
                       >
                         <span className="material-symbols-outlined text-[14px]">lock</span>
@@ -1114,7 +1114,7 @@ export default function ApiManagerPageClient() {
                   <div className="col-span-2 flex items-center justify-end gap-1">
                     <a
                       href={`/dashboard/costs?range=all&apiKeyIds=${encodeURIComponent(key.id)}&groupBy=model`}
-                      className="p-2 hover:bg-emerald-500/10 rounded text-text-muted hover:text-emerald-500 opacity-0 group-hover:opacity-100 transition-all"
+                      className="p-2 hover:bg-emerald-500/10 rounded text-text-muted hover:text-emerald-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
                       title={`View costs for ${key.name}`}
                       aria-label={`View costs for ${key.name}`}
                     >
@@ -1122,21 +1122,21 @@ export default function ApiManagerPageClient() {
                     </a>
                     <button
                       onClick={() => handleRegenerateKey(key.id)}
-                      className="p-2 hover:bg-amber-500/10 rounded text-text-muted hover:text-amber-500 opacity-0 group-hover:opacity-100 transition-all"
+                      className="p-2 hover:bg-amber-500/10 rounded text-text-muted hover:text-amber-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
                       title={t("regenerateKey")}
                     >
                       <span className="material-symbols-outlined text-[18px]">refresh</span>
                     </button>
                     <button
                       onClick={() => handleOpenPermissions(key)}
-                      className="p-2 hover:bg-primary/10 rounded text-text-muted hover:text-primary opacity-0 group-hover:opacity-100 transition-all"
+                      className="p-2 hover:bg-primary/10 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
                       title={t("editPermissions")}
                     >
                       <span className="material-symbols-outlined text-[18px]">tune</span>
                     </button>
                     <button
                       onClick={() => handleDeleteKey(key.id)}
-                      className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-0 group-hover:opacity-100 transition-all"
+                      className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
                       title={t("deleteKey")}
                     >
                       <span className="material-symbols-outlined text-[18px]">delete</span>
@@ -1147,7 +1147,7 @@ export default function ApiManagerPageClient() {
             };
 
             const tableHeader = (
-              <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-surface/50 border-b border-border text-xs font-semibold text-text-muted uppercase tracking-wider">
+              <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-surface/50 border-b border-border text-xs font-semibold text-text-muted uppercase tracking-wider min-w-[760px]">
                 <div className="col-span-2">{t("name")}</div>
                 <div className="col-span-3">{t("key")}</div>
                 <div className="col-span-2">{t("permissions")}</div>
@@ -1173,9 +1173,11 @@ export default function ApiManagerPageClient() {
                         {normalKeys.length}
                       </span>
                     </div>
-                    <div className="flex flex-col border border-border rounded-lg overflow-hidden">
-                      {tableHeader}
-                      {normalKeys.map(renderKeyRow)}
+                    <div className="border border-border rounded-lg overflow-hidden">
+                      <div className="overflow-x-auto">
+                        {tableHeader}
+                        {normalKeys.map(renderKeyRow)}
+                      </div>
                     </div>
                   </div>
                 )}
@@ -1196,9 +1198,11 @@ export default function ApiManagerPageClient() {
                         {t("quotaPill")}
                       </span>
                     </div>
-                    <div className="flex flex-col border border-border rounded-lg overflow-hidden">
-                      {tableHeader}
-                      {quotaKeys.map(renderKeyRow)}
+                    <div className="border border-border rounded-lg overflow-hidden">
+                      <div className="overflow-x-auto">
+                        {tableHeader}
+                        {quotaKeys.map(renderKeyRow)}
+                      </div>
                     </div>
                   </div>
                 )}

From dafb892463481ba8af091462e6ef80773f9ac585 Mon Sep 17 00:00:00 2001
From: janeza2 <janeza2@users.noreply.github.com>
Date: Sun, 21 Jun 2026 18:24:27 -0300
Subject: [PATCH 2/2] chore(quality): bump ApiManagerPageClient.tsx file-size
 baseline 2979->2983

Mobile-responsive table fix adds a horizontal-scroll wrapper + min-w + mobile-visible
action buttons (+4 lines). Baseline bumped to match (wc+1). Fast-gate PR->release does
not run check:file-size; reconciled in-branch per Hard Rule #9.

Co-authored-by: diegosouzapw <diegosouza.pw@gmail.com>
---
 config/quality/file-size-baseline.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/quality/file-size-baseline.json b/config/quality/file-size-baseline.json
index 711f3a72d8ed..5b40e52716ca 100644
--- a/config/quality/file-size-baseline.json
+++ b/config/quality/file-size-baseline.json
@@ -139,7 +139,7 @@
     "open-sse/utils/stream.ts": 2710,
     "src/app/(dashboard)/dashboard/HomePageClient.tsx": 1385,
     "src/app/(dashboard)/dashboard/analytics/ComboHealthTab.tsx": 1020,
-    "src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx": 2979,
+    "src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx": 2983,
     "src/app/(dashboard)/dashboard/cache/media/MediaPageClient.tsx": 1105,
     "src/app/(dashboard)/dashboard/cache/page.tsx": 841,
     "src/app/(dashboard)/dashboard/cli-code/components/CodexToolCard.tsx": 900,