fix(SDK-1219): make DataView column justify the single source of truth for alignment

src/components/Common/DataView/DataTable/DataTable.test.tsx

@@ -221,6 +221,26 @@ describe('DataTable Component', () => {
       expect(screen.getByText('Name').closest('div')?.className).toMatch(/cellEnd/)
       expect(screen.getByText('Alice').closest('div')?.className).toMatch(/cellEnd/)
     })
+
+    test('does not wrap content when justify is unset — even for the last column', () => {
+      // Alignment is now driven solely by column.justify; there is no implicit
+      // "last column right-aligns" behavior, so an unset column must not be wrapped.
+      renderTable({
+        columns: [{ key: 'name', title: 'Name', render: item => item.name }],
+      })
+
+      expect(screen.getByText('Name').closest('div')?.className ?? '').not.toMatch(/cellEnd/)
+      expect(screen.getByText('Alice').closest('div')?.className ?? '').not.toMatch(/cellEnd/)
+    })
+
+    test('end-aligns the injected actions column so the row menu stays flush-right', () => {
+      renderTable({
+        columns: [{ key: 'name', title: 'Name', render: item => item.name }],
+        itemMenu: item => <button type="button">Menu for {item.name}</button>,
+      })
+
+      expect(screen.getByText('Menu for Alice').closest('div')?.className).toMatch(/cellEnd/)
+    })
   })
 
   describe('accessibility', () => {

src/components/Common/DataView/DataTable/DataTable.tsx

@@ -116,7 +116,10 @@ export const DataTable = <T,>({
       ? [
           {
             key: 'actions-header',
-            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,
+            content: withJustify(
+              <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,
+              'end',
+            ),
           },
         ]
       : []),
@@ -176,7 +179,7 @@ export const DataTable = <T,>({
         ? [
             {
               key: `menu-${rowIndex}`,
-              content: itemMenu(item),
+              content: withJustify(itemMenu(item), 'end'),
             },
           ]
         : []),

src/components/Common/DataView/DataView.stories.tsx

@@ -373,3 +373,22 @@ export const DataViewWithFooter = () => {
 
   return <DataView label="Data View with Footer" {...dataProps} />
 }
+
+// Alignment is driven entirely by column.justify: the numeric "Amount" column
+// right-aligns (header, body, and footer), while text columns stay left. The
+// injected row-menu column is always flush-right.
+export const DataViewWithJustifiedColumns = () => {
+  const justifiedColumns: useDataViewProp<CompensationRow>['columns'] = [
+    { key: 'jobTitle', title: 'Job Title' },
+    { key: 'payType', title: 'Pay Type' },
+    { key: 'amount', title: 'Amount', justify: 'end' },
+    { key: 'payTimePeriod', title: 'Pay Time Period' },
+  ]
+  const dataProps = useDataView({
+    data: compensationData,
+    columns: justifiedColumns,
+    itemMenu: renderItemMenu,
+    footer: () => ({ jobTitle: 'Total', amount: '$1,050.15' }),
+  })
+  return <DataView label="Data View with Justified Columns" {...dataProps} />
+}

src/components/Common/UI/Table/Table.module.scss

@@ -106,13 +106,6 @@
         outline: var(--g-focusRingWidth) solid var(--g-focusRingColor);
         outline-offset: -2px;
       }
-      &:last-child {
-        text-align: right;
-
-        :global(.react-aria-Button) {
-          display: inline-flex;
-        }
-      }
 
       // Empty state row styling
       :global(.react-aria-Row[data-empty-state='true']) & {

src/components/Company/StateTaxes/TaxRateManagement/TaxRateHistorySection.tsx

@@ -68,6 +68,7 @@ export function TaxRateHistorySection({ group, showHeader = true }: TaxRateHisto
       ...requirementColumns.map(column => ({
         key: column.key,
         title: column.label ?? column.key,
+        justify: 'end' as const,
         render: (row: HistoryRow) => row.values[column.key] ?? '',
       })),
     ],

src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx

@@ -190,6 +190,7 @@ export const PaymentStatementPresentation = ({
           },
           {
             title: t('amountColumn'),
+            justify: 'end',
             render: ({ amount }) => amount || '',
           },
         ]}

src/components/Employee/Compensation/onboarding/JobsList/JobsListPresentation.tsx

@@ -66,6 +66,7 @@ export function JobsListPresentation({
       {
         key: 'rate',
         title: t('allCompensations.amountColumn'),
+        justify: 'end',
         render: (job: Job) => job.rate?.toString() || '',
       },
       {

src/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.tsx

@@ -113,6 +113,7 @@ function DeductionsCardContent({ employeeId, onEvent, LoaderComponent }: Deducti
     {
       key: 'amount',
       title: t('columns.withhold'),
+      justify: 'end' as const,
       render: (garnishment: Garnishment) =>
         formatDeductionAmount(garnishment, {
           formatCurrency,

src/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.tsx

@@ -60,6 +60,7 @@ export function DeductionsList({
       {
         key: 'amount',
         title: t('withheldColumn'),
+        justify: 'end',
         render: deduction =>
           formatDeductionAmount(deduction, {
             formatCurrency,

src/components/Employee/PaymentMethod/onboarding/ListView.tsx

@@ -110,6 +110,7 @@ function ListViewReady({
       {
         key: 'splitAmount',
         title: t('allocationColumn'),
+        justify: 'end',
         render: bankAccount => {
           const splitAmount =
             paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0

src/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.tsx

@@ -199,6 +199,7 @@ function PaystubsCardReady({
     {
       key: 'checkAmount',
       title: t('checkAmount'),
+      justify: 'end' as const,
       render: (payStub: EmployeePayStub) => {
         if (!payStub.netPay) return '-'
         const amount = parseFloat(payStub.netPay)
@@ -208,6 +209,7 @@ function PaystubsCardReady({
     {
       key: 'grossPay',
       title: t('grossPay'),
+      justify: 'end' as const,
       render: (payStub: EmployeePayStub) => {
         if (!payStub.grossPay) return '-'
         const amount = parseFloat(payStub.grossPay)

src/components/Payroll/OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.module.scss

@@ -32,10 +32,6 @@
     :global(.react-aria-Cell) {
       width: 50%;
       text-align: left;
-
-      &:last-child {
-        text-align: left;
-      }
     }
   }
 }

src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx

@@ -216,6 +216,7 @@ export const PayrollConfigurationPresentation = ({
                   },
                   {
                     title: t('tableColumns.hours'),
+                    justify: 'end',
                     render: (item: PayrollEmployeeCompensationsType) => {
                       const hours = getRegularHours(item)
                       const overtimeHours = getOvertimeHours(item)
@@ -224,13 +225,15 @@ export const PayrollConfigurationPresentation = ({
                   },
                   {
                     title: t('tableColumns.timeOff'),
+                    justify: 'end',
                     render: (item: PayrollEmployeeCompensationsType) => {
                       const ptoHours = getTotalPtoHours(item)
                       return formatHoursDisplay(ptoHours)
                     },
                   },
                   {
                     title: t('tableColumns.additionalEarnings'),
+                    justify: 'end',
                     render: (item: PayrollEmployeeCompensationsType) => {
                       const earnings = getAdditionalEarnings(item)
                       return formatNumberAsCurrency(earnings)
@@ -240,6 +243,7 @@ export const PayrollConfigurationPresentation = ({
                     ? [
                         {
                           title: t('tableColumns.reimbursements'),
+                          justify: 'end' as const,
                           render: (item: PayrollEmployeeCompensationsType) => {
                             const reimbursements = getReimbursements(item)
                             return formatNumberAsCurrency(reimbursements)
@@ -249,6 +253,7 @@ export const PayrollConfigurationPresentation = ({
                     : []),
                   {
                     title: t('tableColumns.totalPay'),
+                    justify: 'end',
                     render: (item: PayrollEmployeeCompensationsType) => {
                       const employee = employeeMap.get(item.employeeUuid || '')
                       const calculatedGrossPay = employee

src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx

@@ -450,6 +450,7 @@ export const PayrollEditEmployeePresentation = ({
       {
         key: 'amount',
         title: t('reimbursementAmountColumn'),
+        justify: 'end',
         render: row => formatNumberAsCurrency(parseFloat(row.amount || '0')),
       },
       {

src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx

@@ -187,6 +187,7 @@ export const PayrollHistoryPresentation = ({
           },
           {
             title: t('columns.totalPayroll'),
+            justify: 'end',
             render: (item: Payroll) => formatNumberAsCurrency(calculateTotalPayroll(item)),
           },
         ]}

src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx

@@ -218,6 +218,7 @@ export const PayrollOverviewPresentation = ({
   const companyPaysColumns: Array<{
     key: string
     title: string
+    justify?: 'start' | 'end'
     render: (item: EmployeeCompensations) => React.ReactNode
   }> = [
     {
@@ -236,6 +237,7 @@ export const PayrollOverviewPresentation = ({
     {
       key: 'grossPay',
       title: t('tableHeaders.grossPay'),
+      justify: 'end',
       render: (employeeCompensations: EmployeeCompensations) =>
         formatCurrency(Number(employeeCompensations.grossPay!)),
     },
@@ -244,6 +246,7 @@ export const PayrollOverviewPresentation = ({
           {
             key: 'reimbursements',
             title: t('tableHeaders.reimbursements'),
+            justify: 'end' as const,
             render: (employeeCompensation: EmployeeCompensations) =>
               formatCurrency(getReimbursements(employeeCompensation)),
           },
@@ -252,18 +255,21 @@ export const PayrollOverviewPresentation = ({
     {
       key: 'companyTaxes',
       title: t('tableHeaders.companyTaxes'),
+      justify: 'end',
       render: (employeeCompensation: EmployeeCompensations) =>
         formatCurrency(getCompanyTaxes(employeeCompensation)),
     },
     {
       key: 'companyBenefits',
       title: t('tableHeaders.companyBenefits'),
+      justify: 'end',
       render: (employeeCompensation: EmployeeCompensations) =>
         formatCurrency(getCompanyBenefits(employeeCompensation)),
     },
     {
       key: 'companyPays',
       title: t('tableHeaders.companyPays'),
+      justify: 'end',
       render: (employeeCompensation: EmployeeCompensations) =>
         formatCurrency(getCompanyCost(employeeCompensation)),
     },

src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx

@@ -180,6 +180,7 @@ export const PayrollReceiptsPresentation = ({
           },
           {
             title: t('breakdown.amount'),
+            justify: 'end',
             render: (item: { label: string; amount: number }) =>
               formatNumberAsCurrency(item.amount),
           },
@@ -204,6 +205,7 @@ export const PayrollReceiptsPresentation = ({
           },
           {
             title: t('tax.amount'),
+            justify: 'end',
             render: (tax: TaxBreakdownItem) =>
               formatNumberAsCurrency(parseFloat(tax.amount || '0')),
           },
@@ -259,25 +261,29 @@ export const PayrollReceiptsPresentation = ({
             },
             {
               title: t('employee.childSupport'),
+              justify: 'end',
               render: (employee: EmployeeBreakdownItem) =>
                 formatNumberAsCurrency(parseFloat(employee.childSupportGarnishment || '0')),
             },
             ...(withReimbursements
               ? [
                   {
                     title: t('employee.reimbursement'),
+                    justify: 'end' as const,
                     render: (employee: EmployeeBreakdownItem) =>
                       formatNumberAsCurrency(parseFloat(employee.totalReimbursement || '0')),
                   },
                 ]
               : []),
             {
               title: t('employee.totalTaxes'),
+              justify: 'end',
               render: (employee: EmployeeBreakdownItem) =>
                 formatNumberAsCurrency(parseFloat(employee.totalTax || '0')),
             },
             {
               title: t('employee.netPay'),
+              justify: 'end',
               render: (employee: EmployeeBreakdownItem) =>
                 formatNumberAsCurrency(parseFloat(employee.netPay || '0')),
             },

src/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.tsx

@@ -132,6 +132,7 @@ function Root({ companyId, dictionary, onEvent }: RecoveryCasesListProps) {
       {
         key: 'totalAmount',
         title: t('columns.totalAmount'),
+        justify: 'end',
         render: recoveryCase => (
           <Text>
             {recoveryCase.eventTotalAmount
@@ -143,6 +144,7 @@ function Root({ companyId, dictionary, onEvent }: RecoveryCasesListProps) {
       {
         key: 'amountOutstanding',
         title: t('columns.amountOutstanding'),
+        justify: 'end',
         render: recoveryCase => (
           <Text>
             {recoveryCase.amountOutstanding

src/components/TimeOff/shared/EmployeeTable/EmployeeTable.module.scss

@@ -3,15 +3,6 @@
   display: flex;
   flex-direction: column;
   gap: toRem(16);
-
-  &:not([data-has-menu]) {
-    :global(.react-aria-Cell),
-    :global(.react-aria-Column) {
-      &:last-child {
-        text-align: left;
-      }
-    }
-  }
 }
 
 .searchContainer {

src/components/TimeOff/shared/EmployeeTable/EmployeeTable.tsx

@@ -100,7 +100,7 @@ export function EmployeeTable<T extends EmployeeTableItem>({
   } as useDataViewProp<T>)
 
   return (
-    <div className={styles.root} data-has-menu={itemMenu ? true : undefined}>
+    <div className={styles.root}>
       {!hideSearch && (
         <div className={styles.searchContainer}>
           <Components.TextInput