fix(LayoutContent): auto-height layout

Author: tenphi

src/components/content/Layout/Layout.stories.tsx

@@ -429,7 +429,7 @@ export const MultiplePanels: Story = {
 
 export const HorizontalScrollableContent: Story = {
   render: () => (
-    <Space width="500px" height="(5x - 2bw)">
+    <Space width="500px" gap="0">
       <Layout.Block fill="#light" placeSelf="center">
         Fixed Left
       </Layout.Block>

src/components/content/Layout/Layout.test.tsx

@@ -327,7 +327,7 @@ describe('Layout.Panel resize handler', () => {
 describe('Layout.Panel validation', () => {
   beforeEach(() => {
     // Suppress console.error for expected errors
-    jest.spyOn(console, 'error').mockImplementation(() => { });
+    jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
   afterEach(() => {

src/components/content/Layout/LayoutContent.tsx

@@ -19,20 +19,23 @@ const ContentElement = tasty({
   qa: 'LayoutContent',
   styles: {
     position: 'relative',
-    display: 'block',
+    display: 'grid',
+    gridColumns: '1sf',
+    gridRows: '1sf',
+    placeContent: 'stretch',
+    placeItems: 'stretch',
+    placeSelf: 'stretch',
     flexGrow: 1,
-    minHeight: 0,
+    height: 'min 0',
     overflow: 'hidden',
     boxSizing: 'border-box',
-    placeSelf: 'stretch',
 
     Inner: {
-      position: 'absolute',
-      inset: 0,
       display: 'flex',
       flow: 'column',
       padding: '($content-padding, 1x)',
       overflow: 'auto',
+      placeSelf: 'stretch',
       scrollbar: {
         '': 'thin',
         'scrollbar=tiny | scrollbar=none': 'none',

src/components/content/Layout/LayoutPanelHeader.tsx

@@ -26,7 +26,7 @@ const PanelHeaderElement = tasty(Item, {
 
 export interface CubeLayoutPanelHeaderProps
   extends BaseProps,
-  ContainerStyleProps {
+    ContainerStyleProps {
   /** Panel title */
   title?: ReactNode;
   /** Title heading level (affects semantics, not visual) */