diff --git a/.changeset/dry-rice-exist.md b/.changeset/dry-rice-exist.md new file mode 100644 index 00000000000..ca17b855513 --- /dev/null +++ b/.changeset/dry-rice-exist.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Right align table actions. diff --git a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx index 14cf911c2c3..819f65ecdc0 100644 --- a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx +++ b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx @@ -42,7 +42,7 @@ export const APIKeysTable = ({ Name Last used - {canManageAPIKeys && Actions} + {canManageAPIKeys && Actions} @@ -98,7 +98,7 @@ export const APIKeysTable = ({ {canManageAPIKeys && ( - + ( - + { isLoading={invitations?.isLoading || loadingRoles} emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')} headers={[ - localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'), - localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited'), - localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'), - localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'), + { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user') }, + { key: localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited') }, + { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role') }, + { + key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'), + align: 'right', + }, ]} rows={(invitations?.data || []).map(i => ( - + { ))} diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx index 331b636d3f1..e17f08f3980 100644 --- a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx +++ b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx @@ -33,9 +33,12 @@ export const RequestToJoinList = () => { isLoading={membershipRequests?.isLoading} emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.table__emptyRow')} headers={[ - localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'), - localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested'), - localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'), + { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user') }, + { key: localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested') }, + { + key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'), + align: 'right', + }, ]} rows={(membershipRequests?.data || []).map(request => ( - + diff --git a/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx index 2a358454ed8..6f1991a1bb5 100644 --- a/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx +++ b/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx @@ -26,9 +26,9 @@ export const PaymentAttemptsList = () => { isLoading={isLoading} emptyStateLocalizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.empty`)} headers={[ - localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__date`), - localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__amount`), - localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__status`), + { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__date`) }, + { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__amount`) }, + { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__status`) }, ]} rows={paymentAttempts.map(i => ( { isLoading={isLoading} emptyStateLocalizationKey={localizationKeys(`${localizationRoot}.billingPage.statementsSection.empty`)} headers={[ - localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__date`), - localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__amount`), + { key: localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__date`) }, + { key: localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__amount`) }, ]} rows={statements.map(i => ( { ))}