Re: [PR] fix(tables): Dark mode scrollbar styles for webkit [superset]

Sat, 18 Oct 2025 12:17:34 -0700 


korbit-ai[bot] commented on code in PR #35338:
URL: https://github.com/apache/superset/pull/35338#discussion_r2391300351


##########
superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx:
##########
@@ -233,6 +236,25 @@ function StickyWrap({
           visibility: 'hidden',
           scrollbarGutter: 'stable',
         }}
+        css={css`
+          &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+          }
+          &::-webkit-scrollbar-track {
+            background: ${theme.colorFillQuaternary};
+          }
+          &::-webkit-scrollbar-thumb {
+            background: ${theme.colorFillSecondary};
+            border-radius: 4px;
+            &:hover {
+              background: ${theme.colorFillTertiary};
+            }
+          }
+          &::-webkit-scrollbar-corner {
+            background: ${theme.colorFillQuaternary};
+          }
+        `}

Review Comment:
   ### Duplicated scrollbar styling <sub>![category 
Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The scrollbar styling CSS is duplicated in two places within the StickyWrap 
component.
   
   
   ###### Why this matters
   Code duplication increases maintenance overhead and the risk of 
inconsistencies when updates are needed. If scrollbar styling needs to be 
changed, it would require changes in multiple places.
   
   ###### Suggested change ∙ *Feature Preview*
   Extract the scrollbar styling into a shared styled component or CSS constant:
   ```typescript
   const scrollbarStyles = css`
     &::-webkit-scrollbar { ... }
     &::-webkit-scrollbar-track { ... }
     &::-webkit-scrollbar-thumb { ... }
     &::-webkit-scrollbar-corner { ... }
   `;
   
   // Then reuse it:
   <div css={scrollbarStyles} />
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4f02a200-8656-46b2-ac25-8e778f3219cc/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4f02a200-8656-46b2-ac25-8e778f3219cc?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4f02a200-8656-46b2-ac25-8e778f3219cc?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4f02a200-8656-46b2-ac25-8e778f3219cc?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/4f02a200-8656-46b2-ac25-8e778f3219cc)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:429ed8bf-ebe1-435a-be14-113673434c07 -->
   
   
   [](429ed8bf-ebe1-435a-be14-113673434c07)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to