From acaebc5bd7f19799fda1dd3e1820f67aa04fd2d7 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 30 Oct 2026 09:02:06 -0400
Subject: [PATCH] fix(mosaic): pin the API keys actions column to the end edge

---
 .changeset/mosaic-api-keys-sticky-actions.md        |  5 +++++
 .../__tests__/api-keys-table.feature.test.tsx       | 13 +++++++++++++
 .../features/api-keys/api-keys-table.skeleton.tsx   |  6 +++++-
 .../src/features/api-keys/api-keys-table.view.tsx   |  6 +++++-
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/mosaic-api-keys-sticky-actions.md

diff --git a/.changeset/mosaic-api-keys-sticky-actions.md b/.changeset/mosaic-api-keys-sticky-actions.md
new file mode 100644
index 00000000000..5ea4080eca4
--- /dev/null
+++ b/.changeset/mosaic-api-keys-sticky-actions.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+The actions menu column in `APIKeysTable` stays pinned to the end edge when the table scrolls horizontally, so each key's menu stays in reach on narrow screens.
diff --git a/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.feature.test.tsx b/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.feature.test.tsx
index 9da43587fb7..ada9bd9e227 100644
--- a/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.feature.test.tsx
+++ b/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.feature.test.tsx
@@ -216,6 +216,19 @@ describe('APIKeysTable', () => {
       expect(columnWidths()).toEqual(loadingWidths);
     });
 
+    it('pins the actions column to the end edge', async () => {
+      await renderTable();
+      const table = await loadedTable();
+      await within(table).findByText('Web app');
+
+      const headers = within(table).getAllByRole('columnheader');
+      expect(headers[headers.length - 1]).toHaveAttribute('data-sticky', 'end');
+      for (const name of ['Web app', 'CI pipeline']) {
+        const trigger = within(table).getByRole('button', { name: `Manage ${name}` });
+        expect(trigger.closest('[role=cell], td')).toHaveAttribute('data-sticky', 'end');
+      }
+    });
+
     it('explains when the user has no keys', async () => {
       await renderTable(signedIn([]));
 
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx b/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx
index 1abf65a710b..fc1863d9b81 100644
--- a/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx
@@ -43,6 +43,7 @@ export function APIKeysTableSkeleton({
           {canManage ? (
             <Table.Column
               align='end'
+              sticky='end'
               width='4rem'
             >
               <VisuallyHidden>{m.actions}</VisuallyHidden>
@@ -77,7 +78,10 @@ export function APIKeysTableSkeleton({
                 </Text>
               </Table.Cell>
               {canManage ? (
-                <Table.Cell align='end'>
+                <Table.Cell
+                  align='end'
+                  sticky='end'
+                >
                   <Skeleton visible={false}>
                     <Menu.Root>
                       <Menu.Trigger
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx b/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
index ae0ada81627..f8c25ad27cc 100644
--- a/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
@@ -84,6 +84,7 @@ export function APIKeysTableView({
             {revoke ? (
               <Table.Column
                 align='end'
+                sticky='end'
                 width='4rem'
               >
                 <VisuallyHidden>{m.actions}</VisuallyHidden>
@@ -136,7 +137,10 @@ export function APIKeysTableView({
                   <Text>{apiKey.lastUsedAtLabel ?? m.neverUsed}</Text>
                 </Table.Cell>
                 {revoke ? (
-                  <Table.Cell align='end'>
+                  <Table.Cell
+                    align='end'
+                    sticky='end'
+                  >
                     <APIKeyActions
                       messages={m}
                       apiKey={apiKey}