You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Increase horizontal whitespace between navbar icon links (#1964)
Fixes external issue:
Quansight-Labs/czi-scientific-python-mgmt#81
This PR increases the horizontal gap between the navbar icons slightly
(1rem to 1.12rem) to align better with accessibility guidelines. The
idea is to make sure that the circle targets (pink) do not overlap.
<See Image in pr 1964>
It would be nice if we could rework the navbar icon links to have a
known hit area at build time (hit area being the union of width, height,
and padding). That way we could calculate the [needed horizontal and
vertical
margins](Quansight-Labs/czi-scientific-python-mgmt#81 (comment))
with SCSS, like so:
```scss
@mixin enclosing-circle-margin($hit-area-width, $hit-area-height) {
// the diagonal of the hit area rectangle is also the diameter of the minimum enclosing circle
$hit-area-diagonal: math.hypot($hit-area-width, $hit-area-height);
$mx: ($hit-area-diagonal - $hit-area-width) / 2;
$my: ($hit-area-diagonal - $hit-area-height) / 2;
margin: $my $mx;
}
```
But that will have to be for another time.
0 commit comments