Make footer a sibling

Author: raunofreiberg

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/dialog.tsx

@@ -10,7 +10,6 @@ export type DialogProps = {
   className?: string
   onClose?: () => void
   dialogResizerRef?: React.RefObject<HTMLDivElement | null>
-  footer?: React.ReactNode
 } & React.HTMLAttributes<HTMLDivElement>
 
 const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
@@ -29,7 +28,6 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
   dialogResizerRef,
-  footer,
   ...props
 }) {
   const dialogRef = React.useRef<HTMLDivElement | null>(null)
@@ -117,7 +115,6 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       >
         <div ref={ref}>{children}</div>
       </div>
-      {footer}
     </div>
   )
 }

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts

@@ -1,7 +1,6 @@
 const styles = `
   [data-nextjs-dialog-root] {
     --next-dialog-radius: var(--rounded-xl);
-    --next-dialog-footer-height: var(--size-48);
     --next-dialog-max-width: 960px;
     --next-dialog-row-padding: 16px;
     --next-dialog-padding-x: 12px;
@@ -77,7 +76,6 @@ const styles = `
   }
 
   [data-nextjs-dialog-content] {
-    overflow-y: auto;
     border: none;
     margin: 0;
     display: flex;
@@ -97,9 +95,8 @@ const styles = `
   }
 
   [data-nextjs-dialog-footer] {
-    position: sticky;
+    position: relative;
     bottom: 0;
-    &, > * { min-height: var(--next-dialog-footer-height); }
   }
 
   @media (max-height: 812px) {

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx

@@ -10,44 +10,41 @@ type ErrorOverlayDialogProps = {
 export function ErrorOverlayDialog({
   children,
   onClose,
+  footer,
   ...props
 }: ErrorOverlayDialogProps) {
   return (
-    <Dialog
-      type="error"
-      aria-labelledby="nextjs__container_errors_label"
-      aria-describedby="nextjs__container_errors_desc"
-      onClose={onClose}
-      className="error-overlay-dialog"
-      {...props}
-    >
-      {children}
-    </Dialog>
+    <div className="error-overlay-dialog-container">
+      <Dialog
+        type="error"
+        aria-labelledby="nextjs__container_errors_label"
+        aria-describedby="nextjs__container_errors_desc"
+        className="error-overlay-dialog-scroll"
+        onClose={onClose}
+        {...props}
+      >
+        {children}
+      </Dialog>
+      {footer}
+    </div>
   )
 }
 
 export const DIALOG_STYLES = `
-  .error-overlay-dialog {
-    overflow-y: auto;
-    -webkit-font-smoothing: antialiased;
+  .error-overlay-dialog-container {
+    display: flex;
+    flex-direction: column;
     background: var(--color-background-100);
     background-clip: padding-box;
     border: var(--next-dialog-border-width) solid var(--color-gray-400);
-    border-radius: var(--rounded-xl);
+    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);
     box-shadow: var(--shadow-menu);
     position: relative;
+    overflow: hidden;
+  }
 
-    &:has(
-        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']
-      ) {
-      border-top-left-radius: 0;
-    }
-
-    &:has(
-        ~ [data-nextjs-error-overlay-nav]
-          .error-overlay-notch[data-side='right']
-      ) {
-      border-top-right-radius: 0;
-    }
+  .error-overlay-dialog-scroll {
+    overflow-y: auto;
+    height: 100%;
   }
 `