fix(mosaic): pin the API keys actions column to the end edge

.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.

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([]));
 

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

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}