Docs: change TOC margin/padding to fix focus outline#37940
Docs: change TOC margin/padding to fix focus outline#37940patrickhlauke wants to merge 2 commits intomainfrom
Conversation
| @@ -10,6 +10,10 @@ | |||
| overflow-y: auto; | |||
There was a problem hiding this comment.
I don't see the cutoff on the left, only on the right. Given that, wondering if it's simpler to just add padding-right: .125rem; around here? Curious why I'm seeing a different cropping than you though.
There was a problem hiding this comment.
different window sizes? let me get a quick screen recording of what i'm seeing...
There was a problem hiding this comment.
@mdo here's a before (0:00) and after (0:16) comparison - note how the nav changes both for xl, md, and sm (this change comes from our grid, not from the styles for the subnav). just doing the padding-right fixes it for xl, but not for md (and i didn't add the fix to the left-hand side to xl, as then it makes it overcompensates for the xl sizes)
bootstrap-pr37940-before-after.mp4
one slight annoyance there is the longer link for the "responsive meta tag" which breaks onto two lines...but I personally can live with that at the md size
|
superseded by #37965 |
2 participants
Description
Slight modification to the TOC styles for the documentation to allow for appropriate space for the default focus outline.
Motivation & Context
Current look of the focus outline in the documentation (not on the live site yet, but in the main branch) - awkwardly cut off at medium and large breakpoints.
With the PR applied, margin/padding are modified slightly to provide enough space for the default focus outline to show in full.
Live previews