diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css index 443eadf54e..db2d946b83 100644 --- a/src/devtools/views/Components/OwnersStack.css +++ b/src/devtools/views/Components/OwnersStack.css @@ -42,13 +42,19 @@ border-radius: 0.25rem; display: inline-flex; align-items: center; - padding: 0.25rem; + padding: 0; flex: 0 0 auto; border: none; background: var(--color-button-background); color: var(--color-button); margin-right: 0.5rem; } +.MenuButtonContent { + display: inline-flex; + align-items: center; + border-radius: 0.25rem; + padding: 0.25rem; +} .MenuButton:hover { color: var(--color-button-hover); } @@ -57,10 +63,14 @@ color: var(--color-button-active); outline: none; } -.MenuButton:focus-within { - background: var(--color-button-background-focus); + +.MenuButton:focus, +.MenuButtonContent:focus { outline: none; } +.MenuButton:focus > .MenuButtonContent { + background: var(--color-button-background-focus); +} .Modal[data-reach-menu-list] { display: inline-flex; diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js index 6d909d3a70..860514fc78 100644 --- a/src/devtools/views/Components/OwnersStack.js +++ b/src/devtools/views/Components/OwnersStack.js @@ -97,7 +97,9 @@ function ElementsDropdown({ {/* TODO (tooltips) */} - + + + {/* TODO (tooltips) */}