[Table] Sortable column (aria-sort) with hAlign="right" is aligned to the left

[daniel-rodrigue]

When using aria-sort with hAlign="right", the column is left-aligned. Without the aria-sort, the cell is right-aligned as expected.

Steps to reproduce the behavior:

<Table>
  <TableHeader>
    <TableRow>
      <TableCell hAlign="right" aria-sort={"col1" === sortKey ? sortOrder : "none"} onClick={...}>Column 1</TableCell>
      ...

Expected behavior
With the "aria-sort" and hAlign="right", the cell should be right-aligned.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browsers: chrome, edge, safari & firefox
• Version: all latest browsers

Additional context
Looking at the CSS, there's a width: 100% in the cell's button that seems to push its content to the left.

.rmd-table-cell__child {
    padding-left: var(--rmd-table-cell-h-padding, 1rem);
    padding-right: var(--rmd-table-cell-h-padding, 1rem);
    align-items: center;
    color: inherit;
    font: inherit;
    height: 100%;
    width: 100%;
}