Fix: table widget scroll issue

app/client/src/widgets/TableWidget/component/AutoToolTipComponent.tsx

@@ -1,9 +1,10 @@
-import React, { createRef, useEffect, useState } from "react";
+import React, { createRef, memo, useEffect, useState } from "react";
 import { Tooltip } from "@blueprintjs/core";
 import { CellWrapper, ColumnWrapper } from "./TableStyledWrappers";
 import { CellLayoutProperties, ColumnTypes } from "./Constants";
 import { ReactComponent as OpenNewTabIcon } from "assets/icons/control/open-new-tab.svg";
 import styled from "styled-components";
+import { isEqual } from "lodash";
 
 const TooltipContentWrapper = styled.div<{ width: number }>`
   word-break: break-all;
@@ -82,10 +83,8 @@ function AutoToolTipComponent(props: Props) {
     const element = ref.current;
     if (element && element.offsetWidth < element.scrollWidth) {
       updateToolTip(true);
-    } else {
-      updateToolTip(false);
     }
-  }, [ref]);
+  }, []);
   if (props.columnType === ColumnTypes.URL && props.title) {
     return <LinkWrapper {...props} />;
   }
@@ -115,10 +114,20 @@ function AutoToolTipComponent(props: Props) {
         ) : (
           props.children
         )}
+        {useToolTip && props.children && "..."}
       </CellWrapper>
-      {useToolTip && props.children && "..."}
     </ColumnWrapper>
   );
 }
-
-export default AutoToolTipComponent;
+export default memo(
+  AutoToolTipComponent,
+  (prev, next) =>
+    isEqual(prev.cellProperties, next.cellProperties) &&
+    prev.isHidden === next.isHidden &&
+    prev.isCellVisible === next.isCellVisible &&
+    prev.noPadding === next.noPadding &&
+    prev.children === next.children &&
+    prev.title === next.title &&
+    prev.tableWidth === next.tableWidth &&
+    prev.columnType === next.columnType,
+);

app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx

@@ -3,6 +3,7 @@ import { TableSizes, CellLayoutProperties, CellAlignment } from "./Constants";
 import { Colors, Color } from "constants/Colors";
 import { hideScrollbar } from "constants/DefaultTheme";
 import { FontStyleTypes, TEXT_SIZES } from "constants/WidgetConstants";
+import { Classes } from "@blueprintjs/core";
 
 export const TableWrapper = styled.div<{
   width: number;
@@ -372,6 +373,9 @@ export const CellWrapper = styled.div<{
   ${TableStyles};
   padding: ${(props) => (props.isPadding ? "0 10px" : " 0px")};
   line-height: 28px;
+  .${Classes.POPOVER_WRAPPER} {
+    overflow: hidden;
+  }
   .image-cell-wrapper {
     width: 100%;
     height: 100%;