Resolved conflicts

app/client/src/components/ads/HorizontalScrollIndicator.tsx

@@ -5,31 +5,47 @@ import { useSpring, animated, interpolate } from "react-spring";
 
 const ScrollTrack = styled.div<{
   isVisible: boolean;
+  bottom?: string;
+  left?: string;
+  mode?: "DARK" | "LIGHT";
 }>`
   position: absolute;
   z-index: 100;
-  bottom: 0;
-  left: 0;
+  bottom: ${(props) => (props.bottom ? props.bottom : "0px")};
+  left: ${(props) => (props.left ? props.left : "0")};
   height: 4px;
-  width: 100%;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 6px
+    ${(props) =>
+      props.mode
+        ? props.mode === "LIGHT"
+          ? props.theme.colors.scrollbarLightBG
+          : props.theme.colors.scrollbarDarkBG
+        : props.theme.colors.scrollbarBG};
   overflow: hidden;
   opacity: ${(props) => (props.isVisible ? 1 : 0)};
   transition: opacity 0.15s ease-in;
 `;
 
-const ScrollThumb = styled(animated.div)`
+const ScrollThumb = styled(animated.div)<{ mode?: "DARK" | "LIGHT" }>`
   height: 4px;
-  background-color: #666666;
-  border-radius: 3px;
+  background-color: ${(props) =>
+    props.mode
+      ? props.mode === "LIGHT"
+        ? props.theme.colors.scrollbarLight
+        : props.theme.colors.scrollbarDark
+      : props.theme.colors.scrollbar};
+  border-radius: ${(props) => props.theme.radii[3]}px;
   transform: translate3d(0, 0, 0);
-  position: relative;
+  position: fixed;
 `;
 
 interface Props {
   containerRef: React.RefObject<HTMLDivElement>;
+  bottom?: string;
+  left?: string;
+  mode?: "DARK" | "LIGHT";
 }
-const HorizontalScrollIndicator = ({ containerRef }: Props) => {
+const HorizontalScrollIndicator = ({ containerRef, bottom, left }: Props) => {
   const [{ thumbPosition }, setThumbPosition] = useSpring<{
     thumbPosition: number;
     config: {
@@ -54,7 +70,7 @@ const HorizontalScrollIndicator = ({ containerRef }: Props) => {
     const handleContainerScroll = (e: any): void => {
       setIsScrollVisible(true);
       const thumbFromLeft =
-        e.target.offsetWidth / (e.target.scrollWidth / e.target.offsetWidth);
+        e.target.offsetWidth - (e.target.scrollWidth - e.target.offsetWidth);
       const thumbPosition = e.target.scrollLeft;
       /* set scroll thumb height */
       if (thumbRef.current) {
@@ -86,12 +102,15 @@ const HorizontalScrollIndicator = ({ containerRef }: Props) => {
   }, 1500);
 
   return (
-    <ScrollTrack isVisible={isScrollVisible} className="scrollbar-track">
+    <ScrollTrack isVisible={isScrollVisible} bottom={bottom} left={left}>
       <ScrollThumb
         className="scrollbar-thumb"
         ref={thumbRef}
         style={{
-          left: interpolate([thumbPosition], (left: number) => `${left}px`),
+          marginLeft: interpolate(
+            [thumbPosition],
+            (left: number) => `${left}px`,
+          ),
         }}
       />
     </ScrollTrack>

app/client/src/components/ads/ScrollIndicator.tsx

@@ -105,14 +105,12 @@ const ScrollIndicator = ({ containerRef, top, bottom, right }: Props) => {
 
   return (
     <ScrollTrack
-      className="scrollbar-track"
       isVisible={isScrollVisible}
       top={top}
       bottom={bottom}
       right={right}
     >
       <ScrollThumb
-        className="scrollbar-thumb"
         ref={thumbRef}
         style={{
           transform: interpolate(

app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx

@@ -17,7 +17,7 @@ import {
   CompactMode,
   CompactModeTypes,
 } from "components/designSystems/appsmith/TableComponent/Constants";
-import HorizontalScrollIndicator from "components/designSystems/appsmith/HorizontalScrollIndicator";
+import HorizontalScrollIndicator from "components/ads/HorizontalScrollIndicator";
 import { Colors } from "constants/Colors";
 
 import { EventType } from "constants/ActionConstants";
@@ -67,7 +67,7 @@ const defaultColumn = {
 
 export const Table = (props: TableProps) => {
   const isResizingColumn = React.useRef(false);
-  const tableWrapperRef = React.useRef<HTMLDivElement>(null);
+  // const tableWrapperRef = React.useRef<HTMLDivElement>(null);
 
   const handleResizeColumn = (columnWidths: Record<string, number>) => {
     const columnSizeMap = {
@@ -153,7 +153,6 @@ export const Table = (props: TableProps) => {
       id={`table${props.widgetId}`}
       triggerRowSelection={props.triggerRowSelection}
       backgroundColor={Colors.ATHENS_GRAY_DARKER}
-      ref={tableWrapperRef}
     >
       <TableHeader
         width={props.width}
@@ -275,12 +274,19 @@ export const Table = (props: TableProps) => {
                 subPage,
                 prepareRow,
               )}
-            <ScrollIndicator containerRef={tableBodyRef} />
+            <ScrollIndicator
+              containerRef={tableBodyRef}
+              mode="LIGHT"
+              top="32px"
+            />
           </div>
         </div>
-        <HorizontalScrollIndicator containerRef={tableWrapperRef} />
+        <HorizontalScrollIndicator
+          containerRef={tableWrapperRef}
+          mode="LIGHT"
+        />
       </div>
-      <ScrollIndicator containerRef={tableWrapperRef} mode="LIGHT" />
+      {/* <ScrollIndicator containerRef={tableWrapperRef} mode="LIGHT" /> */}
     </TableWrapper>
   );
 };

app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx

@@ -25,6 +25,8 @@ export const TableWrapper = styled.div<{
   .tableWrap {
     height: 100%;
     display: block;
+    position: relative;
+    width: ${(props) => props.width - 8}px;
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -58,12 +60,6 @@ export const TableWrapper = styled.div<{
         width: 0px;
         -webkit-appearance: none;
       }
-      .scrollbar-track {
-        top: 32px !important;
-      }
-      .scrollbar-thumb {
-        background: #666666;
-      }
       .tr {
         width: 100%;
       }