[Table] Refactor header menus to divorce click-target size from gradient size

[cmslewis]

Builds on #891

Changes proposed in this pull request:

Table column headers suffer from a problem:

• The gradient effect isn't wide enough for the text to fade out entirely before reaching the popover target (separate issue: the icon doesn't have a background, so text is visible beneath it):
  
• Making the gradient bigger also makes the popover click target bigger—to a silly extent.
  

This PR divorces the gradient from the popover click target. Now, we can resize the gradient without affecting the size of the click target. Specific changes:

• Elements are now organized like this:
  • bp-table-th-menu-container (new)
    • bp-table-th-menu-container-background (new; sibling of bp-table-th-menu)
    • bp-table-th-menu (same thing we had before)
• Click target is now a perfect 30px x 30px.
• Gradient is now 10px wider to ensure the text fades out before reaching the icon.
• Gradient has pointer-events: none to not swallow clicks meant for the underlying header cell.

Reviewers should focus on:

• Implementation look good?
• Visuals look good?
• Interactions feel good?

Screenshot

Gradient before:

Gradient after:

Click target before:

Click target after:

[blueprint-bot]

Refactor header menus to divorce click-target size from gradient size

Preview: docs | table
Coverage: core | datetime

[cmslewis]

Whoops, style regression with interaction bars:

Before:

After:

[llorca]

In addition to the interaction bar regression, the dark theme is broken. Otherwise, 👍 on the refactor, much better implementation of the truncation gradient

[pkwi]

The new gradient and click target are great!

[giladgray]

shouldn't need flex properties if you're using position: absolute but whatever

[cmslewis]

yeah i wasn't actually sure what this rule was doing (i'm no flex expert), but it was there before, so i left it in the refactor.

[giladgray]

i don't think comment means much, and will mean even less in a month. it doesn't even look correct when i compare with code on the left, where the width was obviously larger.

[cmslewis]

fair, though in general i like quick little CSS comments explaining the intent behind a rule. regardless of the target size prior to this refactor, this element's purpose is still to create a larger click target than the 16px icon it wraps, so the comment seemed helpful. if the intent is obvious, happy to remove.

[cmslewis]

@llorca @pkwi fixed the visual bugs. ready for re-review.

[blueprint-bot]

Fix interaction bar style bugs

Preview: docs | table
Coverage: core | datetime