From 10e415655c8be8533f3e0146bb9a48d726e601a5 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Fri, 9 Dec 2022 04:06:58 -0800
Subject: [PATCH] Fix table flickering without hiding content

Summary:
Followup of D39772453 (https://github.com/facebook/flipper/commit/2437aeb3e9b38210bcbdb59c82f0dc97be70e456)
Fixes https://fb.workplace.com/groups/flippersupport/permalink/1518236858656967/

1. Stop using clientWidth and offsetWidth because they have rounding errors
2. Since step 1 did not resolve the issue entirely (for some weird reason I do not really have the capacity now to investigate - my bet it is a rounding error when you sum up doubles) set offset of the table to "scroll" instead of "auto". As a result, it starts rendering space for the scrollbars all the time, but since Flipper is a dev tool it should be fine

Reviewed By: antonk52

Differential Revision: D41839402

fbshipit-source-id: cf50eb1600b692d3970003fd1b45b953ee45e3df
---
 .../__snapshots__/PluginInstaller.node.tsx.snap    |  6 ++----
 .../src/ui/components/table/ManagedTable.tsx       |  5 ++---
 .../src/ui/components/table/TableHead.tsx          | 14 ++++++++------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
index 601aff55a..890169d2f 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
+++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
@@ -53,7 +53,7 @@ exports[`load PluginInstaller list 1`] = `
       </span>
     </div>
     <div
-      class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
@@ -130,7 +130,6 @@ exports[`load PluginInstaller list 1`] = `
       </div>
       <div
         class="css-p5h61d-View-FlexBox-FlexColumn-Container emab7y20"
-        style="overflow: visible;"
       >
         <div
           class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
@@ -440,7 +439,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </span>
     </div>
     <div
-      class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
@@ -517,7 +516,6 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </div>
       <div
         class="css-p5h61d-View-FlexBox-FlexColumn-Container emab7y20"
-        style="overflow: visible;"
       >
         <div
           class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
diff --git a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
index 73d9078fc..f9c3919af 100644
--- a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
@@ -155,7 +155,7 @@ type ManagedTableState = {
 };
 
 const Container = styled(FlexColumn)<{canOverflow?: boolean}>((props) => ({
-  overflow: props.canOverflow ? 'auto' : 'visible',
+  overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
   height: '100%',
 }));
@@ -715,8 +715,7 @@ export class ManagedTable extends React.Component<
             horizontallyScrollable={horizontallyScrollable}
           />
         )}
-        <Container
-          style={{overflow: this.props.autoHeight ? 'visible' : 'hidden'}}>
+        <Container>
           {this.props.autoHeight ? (
             <ContextMenu
               buildItems={
diff --git a/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx b/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
index 5ef4370d5..eeeb6562b 100644
--- a/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
@@ -111,7 +111,7 @@ class TableHeadColumn extends PureComponent<{
   componentDidMount() {
     if (this.props.horizontallyScrollable && this.ref) {
       // measure initial width
-      this.onResize(this.ref.offsetWidth);
+      this.onResize(this.ref.getBoundingClientRect().width);
     }
   }
 
@@ -146,14 +146,16 @@ class TableHeadColumn extends PureComponent<{
         throw new Error('expected there to be parentElement');
       }
 
-      const parentWidth = parentElement.clientWidth;
+      const parentMeasures = parentElement.getBoundingClientRect();
+      const parentWidth = parentMeasures.width;
       const {childNodes} = parentElement;
 
       const lastElem = childNodes[childNodes.length - 1];
-      const right =
-        lastElem instanceof HTMLElement
-          ? lastElem.offsetLeft + lastElem.clientWidth + 1
-          : 0;
+      let right = 0;
+      if (lastElem instanceof HTMLElement) {
+        const lastElemMeasures = lastElem.getBoundingClientRect();
+        right = lastElemMeasures.left + lastElemMeasures.width;
+      }
 
       if (right < parentWidth) {
         normalizedWidth = calculatePercentage(parentWidth, newWidth);