[SignInPage] Remove `minHeight`

[aress31]

Current behavior

The minHeight is currently set to 100vh on the outer <Box>, which can cause layout issues when used with an AppBar. Consider using an unstyled wrappers instead to allow users granular control over the positioning of the <Card>/Form, or even better remove the wrappers.

See:

const Layout = () => (
  <Root>
    <Header>
      <HeaderContent />
    </Header>
    <Content sx={{ bgcolor: "blue" }}>
      <SignInView />
    </Content>
  </Root>
);

const SignInView = () => (
  <SignInPage
    signIn={signIn}
    providers={providers}
  />
);

Versus:

const Layout = () => (
  <Root>
    <Header>
      <HeaderContent />
    </Header>
    <Content sx={{ bgcolor: "green" }}>
      <SignInView />
    </Content>
  </Root>
);

const SignInView = () => (
  <SignInPage
    signIn={signIn}
    providers={providers}
    sx={{ minHeight: "100%" }}
  />
);

EDIT: Similarly, consider removing the outer <Container> restrained at md and which is preventing me from customising the width of the login <Card>, see:

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: signinpage

[apedroferreira]

Yes, and the DashboardLayout component is also using height 100vh and 100vw for width and height when I believe 100% could be used to prevent these same scenarios...

So maybe just using 100% here for the Sign In page minHeight would be possible and help reduce this issue, besides considering the solution you propose.

[aress31]

@apedroferreira well the best way IMHO is to just provider the <Card> and his children and remove all the styling around it. Users are interested in the authentication form/card, not the <Boxes> and <divs> wrapping it and which result in reduced layout flexibility.

[apedroferreira]

@apedroferreira well the best way IMHO is to just provider the <Card> and his children and remove all the styling around it. Users are interested in the authentication form/card, not the <Boxes> and <divs> wrapping it and which result in reduced layout flexibility.

Yes, your suggestion sounds great! I meant in addition.

[bharatkashyap]

Makes sense, open to a PR for this fix. We would have to keep in mind not breaking the layout in existing demos/example apps