Background

There are a series of visual fixes that would improve the appearance of Codex Table's headings. This task collects design issues and, if known, the potential solutions we could apply to address these.

Issues

Fix	Description	Screenshots/Specs
1. Headings should be aligned at the bottom (instead of at the center). This is to avoid creating unnecessary white space and visually support their connection with their respective columns, even if their text wraps.	To achieve this, we could apply vertical-align: bottom to <th>s, in combination with align-items: flex-end to buttons. Unfortunately, we'll need to take special measures to ensure that the text and the icons within the bottom-aligned heading cells remain centered before the text wraps (e.g., applying a bottom padding of 2px to sort icons does the trick, but this doesn't sound ideal).
2. Make sure that heading icons don't shrink when they lack space	At the moment, icons become smaller when space within the heading is compromised (e.g., in case the heading text uses a bigger font size). Looks like adding flex-shrink: 0 to the icons would fix this issue.
3. Make sure that heading buttons take all the available height of <th>s when content wraps	We attempted to fix this in the past (see T364932). The problem is very visually prominent, specially in tables without headers (see screenshot). If this is not feasible technically, we could evaluate other design approaches (different ways to represent states) that could help minimize the issue
4. Place sort icons next to heading text	In the current design, the heading text and sort icon are justified using space-between. Unfortunately, in this layout, the relationship between headings and their corresponding sort icons is sometimes not immediately apparent. The issue accentuates when vertical borders are missing and/or headings with opposite alignment follow each other.

Acceptance criteria

• We define and apply fixes to improve the design of Table headings