using app.tsx experiment

elastic · Nov 28, 2024 · 605c841 · 605c841
1 parent b68b89d
commit 605c841
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 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
@@ -49,15 +49,11 @@ export const GridHeightSmoother = ({
         if (!smoothHeightRef.current) return;
 
         if (expandedPanelId) {
-          const smoothHeightRefY =
-            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)`;
           smoothHeightRef.current.style.transition = 'none';
+          smoothHeightRef.current.style.height = `100%`;
         } else {
           smoothHeightRef.current.style.transition = '';
+          smoothHeightRef.current.style.height = ``;
         }
       }
     );