[FIX] Horizontal scrollbar not showing on tables (#21852)

RocketChat · May 10, 2021 · 82243ad · 82243ad
1 parent 2760fa9
commit 82243ad
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/client/components/GenericTable/index.js b/client/components/GenericTable/index.js
@@ -61,7 +61,7 @@ const GenericTable = (
 			) : (
 				<>
 					<Box mi='neg-x24' pi='x24' flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
-						<ScrollableContentWrapper>
+						<ScrollableContentWrapper overflowX>
 							<Table fixed={fixed} sticky>
 								{header && (
 									<Table.Head>

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
@@ -18,6 +18,7 @@ const styleDefault = {
 };
 
 export type CustomScrollbarsProps = {
+	overflowX?: boolean;
 	style?: CSSProperties;
 	children?: ReactNode;
 	onScroll?: (values: ScrollValues) => void;
@@ -26,7 +27,7 @@ export type CustomScrollbarsProps = {
 };
 
 const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(
-	function WrappedComponent({ children, style, onScroll, renderView }, ref) {
+	function WrappedComponent({ children, style, onScroll, overflowX, renderView }, ref) {
 		const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [
 			style,
 		]) as CSSProperties;
@@ -39,9 +40,13 @@ const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(
 				style={scrollbarsStyle}
 				onScrollFrame={onScroll}
 				renderView={renderView}
-				renderTrackHorizontal={(props): ReactElement => (
-					<div {...props} className='track-horizontal' style={{ display: 'none' }} />
-				)}
+				renderTrackHorizontal={
+					overflowX
+						? undefined
+						: (props): ReactElement => (
+								<div {...props} className='track-horizontal' style={{ display: 'none' }} />
+						  )
+				}
 				renderThumbVertical={({ style, ...props }): JSX.Element => (
 					<div
 						{...props}