Owners stack modal behaves and looks more like a modal

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;
+}

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<HTMLDivElement | null>(null);
+  const dismissModal = useCallback(() => setIsDropdownVisible(false));
+
+  useModalDismissSignal(modalRef, dismissModal);
+
   return (
-    <div className={styles.DropdownWrapper}>
+    <Fragment>
       <Toggle
         className={styles.Toggle}
         isChecked={isDropdownVisible}
@@ -113,7 +119,7 @@ function ElementsDropdown({
         <ButtonIcon type="more" />
       </Toggle>
       {isDropdownVisible && (
-        <div className={styles.Dropdown}>
+        <div className={styles.Modal} ref={modalRef}>
           {ownerStack.map((id, index) => (
             <button
               className={
@@ -128,7 +134,7 @@ function ElementsDropdown({
           ))}
         </div>
       )}
-    </div>
+    </Fragment>
   );
 }