Repository: storybookjs/storybook
File: code/core/src/manager/components/layout/Layout.tsx (TypeScript)

Code before:
            {slots.slotPanel}
          </PanelContainer>
        )}
        {isMobile && <Notifications />}
      </>
    </LayoutContainer>
  );
};

const LayoutContainer = styled.div<{
  panelPosition: LayoutState['panelPosition'];
  showPanel: boolean;
}>(({ panelPosition, showPanel }) => ({
  width: '100%',
  height: ['100vh', '100dvh'],
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  colorScheme: 'light dark',

  [MEDIA_DESKTOP_BREAKPOINT]: {
    display: 'grid',
    gap: 0,
    gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
    gridTemplateRows: `1fr minmax(0, var(--bottom-panel-height))`,
    gridTemplateAreas: (() => {
      if (!showPanel) {
        // showPanel is false by default when viewMode is not 'story', but can be overridden by the user
        return `"sidebar content content"
                  "sidebar content content"`;
      }
      if (panelPosition === 'right') {
        return `"sidebar content panel"
                  "sidebar content panel"`;
      }
      return `"sidebar content content"
                "sidebar panel   panel"`;
    })(),
  },
}));

const SidebarContainer = styled.div(({ theme }) => ({
  backgroundColor: theme.appBg,
  gridArea: 'sidebar',
  position: 'relative',
  borderRight: `1px solid ${theme.appBorderColor}`,
}));

const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
  flex: 1,
  position: 'relative',

Review comment (suggestion):
```suggestion
    // we use css-custom-properties here, to prevent Emotion from generating a new CSS-className on every resize
    gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
    gridTemplateRows: `1fr minmax(0, var(--bottom-panel-height))`,
```

Code after:
            {slots.slotPanel}
          </PanelContainer>
        )}
        {isMobile && <Notifications />}
      </>
    </LayoutContainer>
  );
};

const LayoutContainer = styled.div<{
  panelPosition: LayoutState['panelPosition'];
  showPanel: boolean;
}>(({ panelPosition, showPanel }) => ({
  width: '100%',
  height: ['100vh', '100dvh'],
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  colorScheme: 'light dark',

  [MEDIA_DESKTOP_BREAKPOINT]: {
    display: 'grid',
    gap: 0,
    // This uses CSS variables to prevent Emotion from generating a new CSS className for every possible value
    gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
    gridTemplateRows: `1fr minmax(0, var(--bottom-panel-height))`,
    gridTemplateAreas: (() => {
      if (!showPanel) {
        // showPanel is false by default when viewMode is not 'story', but can be overridden by the user
        return `"sidebar content content"
                  "sidebar content content"`;
      }
      if (panelPosition === 'right') {
        return `"sidebar content panel"
                  "sidebar content panel"`;
      }
      return `"sidebar content content"
                "sidebar panel   panel"`;
    })(),
  },
}));

const SidebarContainer = styled.div(({ theme }) => ({
  backgroundColor: theme.appBg,
  gridArea: 'sidebar',
  position: 'relative',
  borderRight: `1px solid ${theme.appBorderColor}`,
}));

const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
  flex: 1,