Fix `TableSimple` visual regressions (#23765)

* Fix PK and FK indicators were gone

* Fix `SortIcon` opacity

* Fix spacing between column name and sort icon

frontend/src/metabase/visualizations/components/TableSimple/TableCell.jsx

@@ -143,6 +143,7 @@ function TableCell({
       isRightAligned={isColumnRightAligned(column)}
     >
       <CellContent
+        className="cellData"
         isClickable={isClickable}
         onClick={isClickable ? onClick : undefined}
         data-testid="cell-data"

frontend/src/metabase/visualizations/components/TableSimple/TableSimple.styled.tsx

@@ -58,11 +58,23 @@ export const Table = styled.table`
   }
 `;
 
+export const SortIcon = styled(Icon)`
+  margin-right: 3px;
+`;
+
+SortIcon.defaultProps = {
+  size: 8,
+};
+
 export const TableHeaderCellContent = styled.button<{
   isSorted: boolean;
   isRightAligned: boolean;
 }>`
   display: flex;
+  justify-content: ${props =>
+    props.isRightAligned ? "space-between" : "flex-start"};
+  width: 100%;
+
   margin-left: ${props => (props.isRightAligned ? "auto" : "unset")};
 
   color: ${props => (props.isSorted ? color("brand") : color("text-medium"))};
@@ -70,19 +82,15 @@ export const TableHeaderCellContent = styled.button<{
 
   cursor: pointer;
 
+  ${SortIcon} {
+    opacity: ${props => (props.isSorted ? 1 : 0.2)};
+  }
+
   &:hover {
     color: ${() => color("brand")};
   }
 `;
 
-export const SortIcon = styled(Icon)`
-  margin-right: 3px;
-`;
-
-SortIcon.defaultProps = {
-  size: 8,
-};
-
 export const TableFooterRoot = styled.div`
   display: flex;
   flex-shrink: 0;