remove unnecessary

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -1,52 +1,35 @@
 import type { OverlayDispatch, OverlayState } from '../../shared'
 
-import { Suspense, useRef } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
 import { Overlay } from '../overlay/overlay'
-import { useFocusTrap } from '../errors/dev-tools-indicator/utils'
-import { useDelayedRender } from '../../hooks/use-delayed-render'
 import { ACTION_DEVTOOLS_PANEL_TOGGLE } from '../../shared'
 import { css } from '../../utils/css'
 
 export function DevToolsPanel({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   state,
   dispatch,
 }: {
   state: OverlayState
   dispatch: OverlayDispatch
 }) {
-  const dialogRef = useRef<HTMLDivElement>(null)
-
-  // This hook lets us do an exit animation before unmounting the component
-  const { mounted, rendered } = useDelayedRender(state.isDevToolsPanelOpen)
-
-  useFocusTrap(dialogRef, null, rendered)
-
-  if (!mounted) {
-    // Workaround React quirk that triggers "Switch to client-side rendering" if
-    // we return no Suspense boundary here.
-    return <Suspense />
-  }
-
   const onClose = () => {
     dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
   }
 
   return (
     <Overlay data-nextjs-devtools-panel-overlay>
-      <div data-nextjs-devtools-panel-container ref={dialogRef}>
-        <Dialog
-          data-nextjs-devtools-panel-dialog
-          aria-labelledby="nextjs__container_dev_tools_panel_label"
-          aria-describedby="nextjs__container_dev_tools_panel_desc"
-          onClose={onClose}
-        >
-          <DialogContent>
-            <DialogHeader></DialogHeader>
-            <DialogBody></DialogBody>
-          </DialogContent>
-        </Dialog>
-      </div>
+      <Dialog
+        data-nextjs-devtools-panel-dialog
+        aria-labelledby="nextjs__container_dev_tools_panel_label"
+        aria-describedby="nextjs__container_dev_tools_panel_desc"
+        onClose={onClose}
+      >
+        <DialogContent>
+          <DialogHeader></DialogHeader>
+          <DialogBody></DialogBody>
+        </DialogContent>
+      </Dialog>
     </Overlay>
   )
 }
@@ -57,7 +40,7 @@ export const DEVTOOLS_PANEL_STYLES = css`
     top: 10vh;
   }
 
-  [data-nextjs-devtools-panel-container] {
+  [data-nextjs-devtools-panel-dialog] {
     -webkit-font-smoothing: antialiased;
     display: flex;
     flex-direction: column;
@@ -67,7 +50,7 @@ export const DEVTOOLS_PANEL_STYLES = css`
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-lg);
     position: relative;
-    overflow: hidden;
+    overflow-y: auto;
 
     /* TODO: Remove once the content is filled. */
     min-width: 800px;
@@ -76,9 +59,4 @@ export const DEVTOOLS_PANEL_STYLES = css`
     /* This is handled from dialog/styles.ts */
     max-width: var(--next-dialog-max-width);
   }
-
-  [data-nextjs-devtools-panel-dialog] {
-    overflow-y: auto;
-    height: 100%;
-  }
 `