diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css index 270e22ee3b..f7acd99612 100644 --- a/src/devtools/views/Components/OwnersStack.css +++ b/src/devtools/views/Components/OwnersStack.css @@ -2,6 +2,7 @@ flex: 1; display: flex; align-items: center; + position: relative; } .Component, @@ -42,23 +43,6 @@ margin-right: 0.5rem; } -.DropdownWrapper { - display: inline-block; - position: relative; -} - -.Dropdown { - z-index: 1; - position: absolute; - top: calc(100% + 0.25rem); - left: 0; - background-color: var(--color-background); - overflow-y: auto; - max-height: 10rem; - display: flex; - flex-direction: column; -} - .VRule { flex: 0 0 auto; height: 20px; @@ -66,3 +50,19 @@ background-color: var(--color-border); margin: 0 0.5rem; } + +.Modal { + position: absolute; + top: calc(100% + 0.25rem); + left: 2.5rem; + z-index: 1; + display: inline-flex; + flex-direction: column; + background-color: var(--color-background); + padding: 0.5rem; + padding-right: 0; + border: 1px solid var(--color-border); + border-radius: 0.25rem; + max-height: 10rem; + overflow: auto; +} diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js index 9bf7c57732..a9d789ac4a 100644 --- a/src/devtools/views/Components/OwnersStack.js +++ b/src/devtools/views/Components/OwnersStack.js @@ -1,5 +1,6 @@ // @flow import React, { + Fragment, useCallback, useContext, useLayoutEffect, @@ -11,7 +12,7 @@ import ButtonIcon from '../ButtonIcon'; import Toggle from '../Toggle'; import { TreeContext } from './TreeContext'; import { StoreContext } from '../context'; -import { useIsOverflowing } from '../hooks'; +import { useIsOverflowing, useModalDismissSignal } from '../hooks'; import type { Element } from './types'; @@ -102,8 +103,13 @@ function ElementsDropdown({ [selectOwner, setIsDropdownVisible] ); + const modalRef = useRef(null); + const dismissModal = useCallback(() => setIsDropdownVisible(false)); + + useModalDismissSignal(modalRef, dismissModal); + return ( -
+ {isDropdownVisible && ( -
+
{ownerStack.map((id, index) => (
+ ); }