update firewall filter type/value visual treatment

[charliepark]

In #1932 @augustuswm reported that the alignment and spacing was strange when multiple lines were present. @benjaminleonard noted that the table's design hadn't been fully realized according to the spec in Figma. This PR updates the elements of the filter column, as well as the design of the TypeValueCell component, to better match the design.

Current:

Updated:

Fixes #1932

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 2, 2024 10:41pm

[charliepark]

Just noticed a capitalization change we'll need to make to conform to designs. Updating.

[augustuswm]

This looks much more readable. In this version is each filter always on a new line? or will small filters attempt to collapse.

[charliepark]

Great question. I had them on multiple lines, but as our table rows have some CSS constraining the row height, things get a bit crowded when multiple filters are in play. I've updated it so filters will wrap:

Currently protocols/ports are on a second line:

[david-crespo]

Clearly an improvement. At some point we should do one of those + popup things for overflow when there are too many. (made #2118 for that)

One note, I think the letter spacing on the mono font is meant for upper case and is too wide for normal-cased text. We do the !normal-case override in so many places; it might be worth adding a variant of text-mono that is meant to support lower case. @benjaminleonard @paryhin

It doesn't look that bad in the gif, but I think it looks worse in context.

Here it is with !tracking-normal on the badge, which shrinks letter-spacing from 0.04rem (from text-mono-sm) to 0. Worth considering in a followup.