[docs] Make the layout demos usable outside of the box

[oscl]

I tried Bottom App Bar on a Lenovo a 2010 smartphone. But it isn't working properly. You'll know the issue by watching below image:

A small space is shown below that Bottom Nav Bar. How could I remove it?
When I toggled my web browser (Chrome) to Desktop mod, the UI became more bad:-(
Check below screenshot:

Some codes are shown below:
App.js:
`import React, { Component } from 'react';
import Ui from './Ui';

class App extends Component {
render() {
return (

);
}
}

export default App;`

Ui.js:

`import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListSubheader from '@material-ui/core/ListSubheader';
import Avatar from '@material-ui/core/Avatar';
import MenuIcon from '@material-ui/icons/Menu';
import AddIcon from '@material-ui/icons/Add';
import SearchIcon from '@material-ui/icons/Search';
import MoreIcon from '@material-ui/icons/MoreVert';

const styles = theme => ({
container: {
position: 'relative',
maxWidth: 500,
},
text: {
paddingTop: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2,
},
main: {
height: 400,
overflowY: 'auto',
position: 'relative',
},
list: {
marginBottom: theme.spacing.unit * 2,
},
subHeader: {
backgroundColor: '#fff',
},
toolbar: {
alignItems: 'center',
justifyContent: 'space-between',
},
fabButton: {
position: 'absolute',
top: -30,
left: 0,
right: 0,
margin: '0 auto',
},
});

const messages = [
{
id: 1,
primary: 'Brunch this week?',
secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
person: '/static/images/adeel.jpg',
},
{
id: 2,
primary: 'Birthday Gift',
secondary: 'Do you have a suggestion for a good present for John on his work
anniversary. I am really confused & would love your thoughts on it.',
person: '/static/images/uxceo-128.jpg',
},
{
id: 3,
primary: 'Recipe to try',
secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
person: '/static/images/remy.jpg',
},
{
id: 4,
primary: 'Yes!',
secondary: 'I have the tickets to the ReactConf for this year.',
person: '/static/images/uxceo-128.jpg',
},
{
id: 5,
primary: "Doctor's Appointment",
secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
person: '/static/images/adeel.jpg',
},
{
id: 6,
primary: 'Discussion',
secondary: 'Menus that are generated by the bottom app bar (such as a bottom
navigation drawer or overflow menu) open as bottom sheets at a higher elevation
than the bar.',
person: '/static/images/remy.jpg',
},
{
id: 7,
primary: 'Summer BBQ',
secondary: 'Who wants to have a cookout this weekend? I just got some furniture
for my backyard and would love to fire up the grill.',
person: '/static/images/uxceo-128.jpg',
},
];

function BottomAppBar(props) {
const { classes } = props;
return (

Inbox


{messages.map(({ id, primary, secondary, person }) => (

{id === 1 && Today}
{id === 3 && Yesterday}





))}

);
}
BottomAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(BottomAppBar);`
Please help me...
I'm new to ReactJS and Material-Ui

[oliviertassinari]

@AJ-Creations Don't miss this section: https://material-ui.com/getting-started/usage/#responsive-meta-tag

[oscl]

@oliviertassinari meta viewport tag is added by default to public/index.html file. I don't have to put it anywhere manually.

[oliviertassinari]

@AJ-Creations It's also important to notice that the demo wasn't written to be usable outside of the box.