Material-UI: la cuadrícula receptiva no cambia de tamaño en el ancho del móvil

Estoy luchando por conseguir un ancho de página para cambiar el tamaño correctamente utilizando la cuadrícula fluida "xs" de material-ui, es decir, una vista receptiva para dispositivos móviles.

Con un ancho de página mayor (tamaño "sm"), mi prueba se procesa con el relleno esperado; sin embargo, cuando reduzco el tamaño de la pantalla a ~ <700 px, la altura de la tarjeta no aumenta y el borde del texto se pierde.

A continuación, se muestra un ejemplo con el relleno a cada lado del texto:

Cuando encojo el ancho de la pantalla, el relleno no se aplica y la altura del papel no aumenta, por lo que el texto de la derecha está oculto:

Aquí está mi código de ejemplo:

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    padding: 20
  }
});

class Test extends React.Component {
  render() {
    const {classes} = this.props;

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Test);

¿Alguien puede aconsejar cómo hacer que el ancho se redimensione correctamente con el ancho de pantalla más pequeño?