From 82243adfef1f567c9bfff33ccf186e2f04c36926 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Mon, 10 May 2021 16:51:52 -0300
Subject: [PATCH] [FIX] Horizontal scrollbar not showing on tables (#21852)

---
 client/components/GenericTable/index.js        |  2 +-
 client/components/ScrollableContentWrapper.tsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/components/GenericTable/index.js b/client/components/GenericTable/index.js
index 117ffa600f85..e606a43ae64d 100644
--- 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
index 389d5cbf1576..79c19287390a 100644
--- 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}