add info popover to click outside ignore list

vercel · Feb 19, 2025 · 34e241c · 34e241c
1 parent b30743a
commit 34e241c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/...c/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.tsx b/...c/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.tsx
@@ -17,6 +17,7 @@ const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
   '[data-issues-open]',
   '#nextjs-dev-tools-menu',
   '[data-nextjs-error-overlay-nav]',
+  '[data-info-popover]',
 ]
 
 const Dialog: React.FC<DialogProps> = function Dialog({

diff --git a/...rimental/internal/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx b/...rimental/internal/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx
@@ -15,7 +15,7 @@ export function DevToolsInfo({
   setPreviousOpen: (isOpen: boolean) => void
 }) {
   return (
-    <div className="dev-tools-info-popover" {...props}>
+    <div data-info-popover {...props}>
       <div className="dev-tools-info-container">
         <h1 className="dev-tools-info-title">{title}</h1>
         {children}
@@ -44,7 +44,7 @@ export function DevToolsInfo({
 }
 
 export const DEV_TOOLS_INFO_STYLES = css`
-  .dev-tools-info-popover {
+  [data-info-popover] {
     -webkit-font-smoothing: antialiased;
     display: flex;
     flex-direction: column;
@@ -60,7 +60,7 @@ export const DEV_TOOLS_INFO_STYLES = css`
     overflow: hidden;
     opacity: 0;
     outline: 0;
-    min-width: 248px;
+    min-width: 350px;
     transition: opacity var(--animate-out-duration-ms)
       var(--animate-out-timing-function);