diff --git a/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx b/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
index 68873bdbc..8691f3e7b 100644
--- a/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
@@ -205,7 +205,13 @@ export const SustainabilityInsights = () => {
             />
           </Toolbar>
         </Toolbar>
-        <Grid columns="medium" gap="medium" pad={{ vertical: 'medium' }}>
+        <Grid
+          columns="medium"
+          gap="medium"
+          pad={{ vertical: 'medium' }}
+          // helps to smooth collapse transition
+          style={{ maxHeight: '450px' }}
+        >
           <CarbonEmissions />
           <EnergyConsumption />
           <EnergyCost />