using app.tsx experiment

elastic · Nov 28, 2024 · 6f40808 · 6f40808
1 parent b68b89d
commit 6f40808
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
@@ -128,7 +128,16 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             defaultMessage: 'Grid Layout Example',
           })}
         />
-        <EuiPageTemplate.Section color="subdued">
+        <EuiPageTemplate.Section
+          color="subdued"
+          contentProps={
+            expandedPanelId
+              ? {
+                  css: { display: 'flex', flexFlow: 'column nowrap', flexGrow: 1 },
+                }
+              : undefined
+          }
+        >
           <EuiCallOut
             title={i18n.translate('examples.gridExample.sessionStorageCallout', {
               defaultMessage:

diff --git a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx
@@ -53,10 +53,16 @@ export const GridHeightSmoother = ({
             smoothHeightRef.current.getBoundingClientRect().y + document.documentElement.scrollTop;
           const gutterSize = parseFloat(euiThemeVars.euiSizeL);
 
-          // When panel is expanded, ensure the page occupies the full viewport height:
-          smoothHeightRef.current.style.height = `calc(100vh - ${smoothHeightRefY + gutterSize}px)`;
+          // When panel is expanded, ensure the page occupies the full viewport height
+          // If the parent element is a flex container (preferred approach):
+          smoothHeightRef.current.style.flexBasis = `100%`;
+
+          // fallback in case parent is not a flex container (less reliable if shifts happen after the time we calculate smoothHeightRefY)
+          smoothHeightRef.current.style.height = `calc(100vh - ${smoothHeightRefY + gutterSize}px`;
           smoothHeightRef.current.style.transition = 'none';
         } else {
+          smoothHeightRef.current.style.flexBasis = '';
+          smoothHeightRef.current.style.height = '';
           smoothHeightRef.current.style.transition = '';
         }
       }