Skip to content

Commit 5bcbd13

Browse files
authored
[dev-overlay] sync horizontal scrollbar style (#77769)
Following up on #76953. In macOS, the scrollbar color is still light in dark mode. So, we modified the style for it at #76509. However, it didn't cover the scrollbars of the children of the dialog. Therefore, we sync the scrollbar of children to be dark in dark mode as well. | Before | After | |--------|--------| | ![CleanShot 2025-04-03 at 09 59 01@2x](https://github.com/user-attachments/assets/244566ad-4c05-4045-891f-eff8a7acda17) | ![CleanShot 2025-04-03 at 09 57 18@2x](https://github.com/user-attachments/assets/6441251b-eb0d-450d-8a32-75d9a4d88f32) |
1 parent 694b3be commit 5bcbd13

File tree

1 file changed

+20
-19
lines changed
  • packages/next/src/client/components/react-dev-overlay/ui/components/dialog

1 file changed

+20
-19
lines changed

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

+20-19
Original file line numberDiff line numberDiff line change
@@ -37,29 +37,30 @@ const styles = `
3737
outline: 0;
3838
}
3939
40-
[data-nextjs-dialog]::-webkit-scrollbar {
41-
width: 6px;
42-
border-radius: 0 0 1rem 1rem;
43-
margin-bottom: 1rem;
44-
}
40+
[data-nextjs-dialog], [data-nextjs-dialog] * {
41+
&::-webkit-scrollbar {
42+
width: 6px;
43+
height: 6px;
44+
border-radius: 0 0 1rem 1rem;
45+
margin-bottom: 1rem;
46+
}
4547
46-
[data-nextjs-dialog]::-webkit-scrollbar-button {
47-
display: none;
48-
}
48+
&::-webkit-scrollbar-button {
49+
display: none;
50+
}
4951
50-
[data-nextjs-dialog]::-webkit-scrollbar-track {
51-
border-radius: 0 0 1rem 1rem;
52-
background-color: var(--color-background-100);
53-
}
54-
55-
[data-nextjs-dialog]::-webkit-scrollbar-thumb {
56-
border-radius: 1rem;
57-
background-color: var(--color-gray-500);
52+
&::-webkit-scrollbar-track {
53+
border-radius: 0 0 1rem 1rem;
54+
background-color: var(--color-background-100);
55+
}
56+
57+
&::-webkit-scrollbar-thumb {
58+
border-radius: 1rem;
59+
background-color: var(--color-gray-500);
60+
}
5861
}
5962
60-
${
61-
'' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */
62-
}
63+
/* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */
6364
[data-nextjs-dialog-sizer] {
6465
overflow: hidden;
6566
border-radius: inherit;

0 commit comments

Comments
 (0)