fix: force recalc of component size (#4917)

Author: drdelambre

src/dataExplorer/components/Results.scss

@@ -4,6 +4,8 @@ $cf-radius-lg: $cf-radius + 4px;
 
 .data-explorer-results {
   height: 100%;
+  width: 100%;
+  position: absolute;
   border-radius: $cf-radius-lg;
   border: 2px solid transparent;
   background-color: $cf-grey-15;
@@ -39,6 +41,18 @@ $cf-radius-lg: $cf-radius + 4px;
   }
 }
 
+.data-explorer--monaco-outer {
+  flex-grow: 1;
+  position: relative;
+  width: 100%;
+}
+
+.data-explorer--monaco-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
 .query-stat {
   padding: $cf-space-2xs 0;
 }

src/dataExplorer/components/ResultsPane.tsx

@@ -145,21 +145,23 @@ const ResultsPane: FC = () => {
           margin={ComponentSize.Small}
           style={{height: '100%'}}
         >
-          <div style={{height: '100%', width: '100%', position: 'relative'}}>
-            <Suspense
-              fallback={
-                <SpinnerContainer
-                  loading={RemoteDataState.Loading}
-                  spinnerComponent={<TechnoSpinner />}
+          <div className="data-explorer--monaco-outer">
+            <div className="data-explorer--monaco-wrap">
+              <Suspense
+                fallback={
+                  <SpinnerContainer
+                    loading={RemoteDataState.Loading}
+                    spinnerComponent={<TechnoSpinner />}
+                  />
+                }
+              >
+                <FluxMonacoEditor
+                  variables={variables}
+                  script={text}
+                  onChangeScript={setText}
                 />
-              }
-            >
-              <FluxMonacoEditor
-                variables={variables}
-                script={text}
-                onChangeScript={setText}
-              />
-            </Suspense>
+              </Suspense>
+            </div>
           </div>
           <div style={{width: '100%'}}>
             <FlexBox

src/timeMachine/components/TimeMachineFluxEditor.scss

@@ -23,7 +23,7 @@
 }
 
 .flux-editor--monaco {
-  position: relative;
+  position: absolute;
   width: 100%;
   height: 100%;