fix(gsb) adjust paddings so that focus states on the left/right can be visible

kiley-mitti commented 1 year ago

Brief Description

I moved some of the padding from host to the inner <header> container so that when a menu or other focusable item appears in the left or right slot, the focus state won't get cut off by the overflow:hidden on <header> moving overflow:hidden to host wasn't an option because it would then hide any slotted menus.

JIRA Link

ASTRO-6766

Related Issue

General Notes

I ran VRTs and it looks like my change doesn't affect the layout in any way. :)

Motivation and Context

The GSB will cut off focus state of anything slotted in the right-slot or left-slot. The right slot is FOR menus which should always have a focus state.. so it doesn't make sense to have the developer need to tweak this every time in order to get the focus display right.

Issues and Limitations

Types of changes

[x] Bug fix
[ ] New feature
[ ] Breaking change

Checklist

[ ] This PR adds or removes a Storybook story.
[ ] I have added tests to cover my changes.
[x] Regressions are passing and/or failures are documented
[x] Changes have been checked in evergreen browsers

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: af1cf3f04ced1289fed049eb3ee5850794d49e68

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name	Link
Latest commit	af1cf3f04ced1289fed049eb3ee5850794d49e68
Latest deploy log	https://app.netlify.com/sites/astro-preview/deploys/64de2c2ee6db440008cef914
Deploy Preview	https://deploy-preview-1218--astro-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name	Link
Latest commit	af1cf3f04ced1289fed049eb3ee5850794d49e68
Latest deploy log	https://app.netlify.com/sites/astro-stencil/deploys/64de2c2ee68bfd0008962c04
Deploy Preview	https://deploy-preview-1218--astro-stencil.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

RocketCommunicationsInc / astro