From 9261f0dd402a52270c36b463ef4e6b63c5f8399d Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 13 May 2021 13:51:43 -0700
Subject: [PATCH] Fix scroll bar regression

Summary:
Changelog: [Logs] Fix regression causing the scrollbars to be hidden. This diff fixes a regression where the Logs plugin was no longer scrollable (and scrolls indefinitely, killing perf).

As reported in https://fb.workplace.com/groups/flippersupport/permalink/1133775743769749/

The cause of the problem is the swap between the `PluginContainer` and `outOfContentsContainer`.

The deeper root that caused in the first place, is that containers use a `flex: 1` layout, which gets interpreted as `flex: 1 1 0%` (grow, shrink, 0% by default), where it was always inteded to be `flex: 1 1 0` (grow, shrink, by default zero pixels). In practice that difference usually doesn't matter. But sometimes it does... See https://stackoverflow.com/a/42630660/1983583

My whole life has been a lie up to this point.

Will trigger a new release after landing this.

Reviewed By: nikoant

Differential Revision: D28422966

fbshipit-source-id: 3ebd5f8ae76e032c5d698154b021df8ebef2c757
---
 .../src/data-source/DataSourceRendererVirtual.tsx             | 3 ++-
 desktop/flipper-plugin/src/ui/Layout.tsx                      | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx b/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
index 323cee6fb..c83072c92 100644
--- a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
+++ b/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
@@ -325,7 +325,8 @@ const tableContainerStyle = {
   overflowY: 'auto',
   overflowX: 'hidden',
   display: 'flex',
-  flex: 1,
+  // because: https://stackoverflow.com/questions/37386244/what-does-flex-1-mean
+  flex: `1 1 0`,
 } as const;
 
 const tableWindowStyle = {
diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx
index a51c1baee..33f22daf3 100644
--- a/desktop/flipper-plugin/src/ui/Layout.tsx
+++ b/desktop/flipper-plugin/src/ui/Layout.tsx
@@ -94,7 +94,7 @@ const Horizontal = styled(Container)({
 });
 
 const ScrollParent = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
-  flex: 1,
+  flex: `1 1 0`,
   boxSizing: 'border-box',
   position: 'relative',
   overflowX: axis === 'y' ? 'hidden' : 'auto',
@@ -272,7 +272,7 @@ const SandySplitContainer = styled.div<{
 }>((props) => ({
   boxSizing: 'border-box',
   display: 'flex',
-  flex: 1,
+  flex: `1 1 0`,
   flexDirection: props.flexDirection,
   alignItems: props.center ? 'center' : 'stretch',
   gap: normalizeSpace(props.gap, theme.space.small),