Fix custom dataframe scrollbars in Chrome (#8034)

* Fix custom dataframe scrollbars in Chrome and Safari * Add comment
streamlit · Jan 29, 2024 · e82ce52 · e82ce52
1 parent 5bf922f
commit e82ce52
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/frontend/lib/src/components/widgets/DataFrame/DataFrame.tsx b/frontend/lib/src/components/widgets/DataFrame/DataFrame.tsx
@@ -415,6 +415,7 @@ function DataFrame({
     <StyledResizableContainer
       data-testid="stDataFrame"
       className="stDataFrame"
+      hasCustomizedScrollbars={hasCustomizedScrollbars}
       ref={resizableContainerRef}
       onMouseDown={e => {
         if (resizableContainerRef.current && hasCustomizedScrollbars) {

diff --git a/frontend/lib/src/components/widgets/DataFrame/styled-components.ts b/frontend/lib/src/components/widgets/DataFrame/styled-components.ts
@@ -16,22 +16,32 @@
 
 import styled from "@emotion/styled"
 
+export interface StyledResizableContainerProps {
+  hasCustomizedScrollbars: boolean
+}
+
 /**
  * A resizable data grid container component.
  */
-export const StyledResizableContainer = styled.div(({ theme }) => ({
-  position: "relative",
-  display: "inline-block",
+export const StyledResizableContainer =
+  styled.div<StyledResizableContainerProps>(
+    ({ hasCustomizedScrollbars, theme }) => ({
+      position: "relative",
+      display: "inline-block",
 
-  "& .glideDataEditor": {
-    height: "100%",
-    minWidth: "100%",
-    borderRadius: theme.radii.lg,
-  },
+      "& .glideDataEditor": {
+        height: "100%",
+        minWidth: "100%",
+        borderRadius: theme.radii.lg,
+      },
 
-  "& .dvn-scroller": {
-    scrollbarWidth: "thin",
-    ["overflowX" as any]: "auto !important",
-    ["overflowY" as any]: "auto !important",
-  },
-}))
+      "& .dvn-scroller": {
+        // We only want to configure scrollbar aspects for browsers that
+        // don't support custom scrollbars (e.g. Firefox). Also, applying this
+        // in Chrome causes the scrollbar to change to the default scrollbar style.
+        ...(!hasCustomizedScrollbars && { scrollbarWidth: "thin" }),
+        ["overflowX" as any]: "auto !important",
+        ["overflowY" as any]: "auto !important",
+      },
+    })
+  )