From 0fd01d2b68b746254b338e027c1e983faf127304 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 19:35:39 -0400
Subject: [PATCH] fix(ui): add right alignment support for table columns using
 align prop

---
 src/features/admin/pages/RolesPage.client.js | 1 +
 src/features/admin/pages/UsersPage.client.js | 1 +
 src/shared/components/Table.js               | 6 +++---
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/admin/pages/RolesPage.client.js b/src/features/admin/pages/RolesPage.client.js
index 6de8784..7d76afa 100644
--- a/src/features/admin/pages/RolesPage.client.js
+++ b/src/features/admin/pages/RolesPage.client.js
@@ -78,6 +78,7 @@ const RolesPageClient = () => {
             label: '',
             sortable: false,
             noWrap: true,
+            align: 'right',
             render: (role) => (
                 <div className="flex items-center gap-2">
                     <Button
diff --git a/src/features/admin/pages/UsersPage.client.js b/src/features/admin/pages/UsersPage.client.js
index 10c2c34..6d0d925 100644
--- a/src/features/admin/pages/UsersPage.client.js
+++ b/src/features/admin/pages/UsersPage.client.js
@@ -74,6 +74,7 @@ const UsersPageClient = () => {
             label: '',
             sortable: false,
             noWrap: true,
+            align: 'right',
             render: (user) => (
                 <Button
                     variant="secondary"
diff --git a/src/shared/components/Table.js b/src/shared/components/Table.js
index 0774885..ebb5d86 100644
--- a/src/shared/components/Table.js
+++ b/src/shared/components/Table.js
@@ -272,12 +272,12 @@ const Table = ({
                             {columns.map((column) => (
                                 <th
                                     key={column.key}
-                                    className={`${sizeClasses.header} ${column.headerAlign === 'right' ? 'text-right' : 'text-left'} text-[11px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-[0.04em] ${
+                                    className={`${sizeClasses.header} ${column.align === 'right' || column.headerAlign === 'right' ? 'text-right' : 'text-left'} text-[11px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-[0.04em] ${
                                         column.sortable ? 'cursor-pointer hover:text-neutral-900 dark:hover:text-white transition-colors' : ''
                                     }`}
                                     onClick={column.sortable && onSort ? () => onSort(column.key) : undefined}
                                 >
-                                    <div className={`flex items-center ${column.headerAlign === 'right' ? 'justify-end' : ''}`}>
+                                    <div className={`flex items-center ${column.align === 'right' || column.headerAlign === 'right' ? 'justify-end' : ''}`}>
                                         {column.label}
                                         {column.sortable && onSort && <SortIcon column={column} />}
                                     </div>
@@ -302,7 +302,7 @@ const Table = ({
                                         {...rowExtraProps}
                                     >
                                         {columns.map((column, colIdx) => (
-                                            <td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} group-hover:bg-neutral-50 dark:group-hover:bg-neutral-950 transition-colors ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}>
+                                            <td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} ${column.align === 'right' ? 'text-right' : ''} group-hover:bg-neutral-50 dark:group-hover:bg-neutral-950 transition-colors ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}>
                                                 {renderCellContent(item, column)}
                                             </td>
                                         ))}