fix(data-warehouse): stop jitter on sync table (#26358)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 25, 2024 · 2beb224 · 2beb224
1 parent e491803
commit 2beb224
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
@@ -90,6 +90,8 @@ export interface LemonTableProps<T extends Record<string, any>> {
     firstColumnSticky?: boolean
     // Max width for the column headers
     maxHeaderWidth?: string
+    /** Whether to hide the scrollbar. */
+    hideScrollbar?: boolean
 }
 
 export function LemonTable<T extends Record<string, any>>({
@@ -125,6 +127,7 @@ export function LemonTable<T extends Record<string, any>>({
     footer,
     firstColumnSticky,
     maxHeaderWidth,
+    hideScrollbar,
 }: LemonTableProps<T>): JSX.Element {
     /** Search param that will be used for storing and syncing sorting */
     const currentSortingParam = id ? `${id}_order` : 'order'
@@ -234,7 +237,11 @@ export function LemonTable<T extends Record<string, any>>({
             style={style}
             data-attr={dataAttr}
         >
-            <ScrollableShadows direction="horizontal" scrollRef={scrollRef}>
+            <ScrollableShadows
+                innerClassName={hideScrollbar ? 'hide-scrollbar' : undefined}
+                direction="horizontal"
+                scrollRef={scrollRef}
+            >
                 <div className="LemonTable__content">
                     <table>
                         <colgroup>

diff --git a/frontend/src/scenes/data-warehouse/settings/source/Syncs.tsx b/frontend/src/scenes/data-warehouse/settings/source/Syncs.tsx
@@ -24,6 +24,7 @@ export const Syncs = ({ id }: SyncsProps): JSX.Element => {
 
     return (
         <LemonTable
+            hideScrollbar
             dataSource={jobs}
             loading={jobsLoading}
             disableTableWhileLoading={false}