[dev-overlay] sync horizontal scrollbar style

Author: devjiwonchoi

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

@@ -37,29 +37,30 @@ const styles = `
     outline: 0;
   }
 
-  [data-nextjs-dialog]::-webkit-scrollbar {
-    width: 6px;
-    border-radius: 0 0 1rem 1rem;
-    margin-bottom: 1rem;
-  }
+  [data-nextjs-dialog], [data-nextjs-dialog] * {
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      border-radius: 0 0 1rem 1rem;
+      margin-bottom: 1rem;
+    }
 
-  [data-nextjs-dialog]::-webkit-scrollbar-button {
-    display: none;
-  }
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
 
-  [data-nextjs-dialog]::-webkit-scrollbar-track {
-    border-radius: 0 0 1rem 1rem;
-    background-color: var(--color-background-100);
-  }
-    
-  [data-nextjs-dialog]::-webkit-scrollbar-thumb {
-    border-radius: 1rem;
-    background-color: var(--color-gray-500);
+    &::-webkit-scrollbar-track {
+      border-radius: 0 0 1rem 1rem;
+      background-color: var(--color-background-100);
+    }
+      
+    &::-webkit-scrollbar-thumb {
+      border-radius: 1rem;
+      background-color: var(--color-gray-500);
+    }
   }
 
-  ${
-    '' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */
-  }
+  /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */
   [data-nextjs-dialog-sizer] {
     overflow: hidden;
     border-radius: inherit;