Layout is not responsive at step 2

[michaelklem]

Following your documentation for step 2 Mobile Browser, the layout is not responsive and therefore does not match the screenshot shown here: https://builderbook.org/books/saas-boilerplate/material-ui-client-side-and-server-side-rendered-pages-dark-theme-cssbaseline-shared-layout-adding-styles-shared-components-menuwithlinks-notifier-confirmer-nprogress-mobile-browser#mobile-browser

The fix for me was to edit layout/index.tsx and comment out the height style:

  <Grid container direction="row" justifyContent="flex-start" alignItems="stretch" style={styleGrid}>
    {firstGridItem ? (
      <Grid
        item
        sm={2}
        xs={12}
        style={{
          borderRight: '1px #707070 solid',
          justifyContent: 'center',
          // height: '100%', <!-- commenting this out makes the layout responsive
          overflow: 'hidden',
        }}

[klyburke]

@michaelklem Good catch and good fix! I confirm the problem you see, and I confirm that your solution works (in later chapters too). I'll update this code and the text in the book.

---

UPDATE: Both the code and book text have been updated. Thanks again for reporting @michaelklem !