HTML element is cut off when exceeding right boundary on screen - html

Question

I have a website where I use a table to display some data. The issue is that when I view the website on smaller screens, the table is cut off and not all of the content is displayed. You can see below that despite me scrolling all the way to the right, the right most field is only barely visible and cut off by the screen.
I seem to partly be able to fix this by the width css parameter in root but if I set width too high, is just adds unnecessary right margin.
import React from 'react';
import {ListUsersTableRow} from "./listUserTableRow";
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';
const styles = theme => ({
root: {
[theme.breakpoints.up('md')]: {
width: `calc(100% - 140px)`,
},
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
});
export const ListUsersTable = (props) => {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Edit</TableCell>
<TableCell>Full name</TableCell>
<TableCell>Username</TableCell>
<TableCell>Email</TableCell>
<TableCell>Company</TableCell>
<TableCell>Contact Number</TableCell>
<TableCell>Role</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.users.map(user => <ListUsersTableRow key={user.id} {...user} toggleEdit={props.toggleEdit}/>)}
</TableBody>
</Table>
</Paper>
)
};
export default withStyles(styles)(ListUsersTable);

Answer 1

min-width is causing your table to be at least as wide as 700.
Try something simple like width: 100%;
If width:100%; messes up your side menu, you may want to consider setting the width of the menu to something like 30% instead of, say, 240px. With your menu taking up 30% of the page, and your table taking up the other 70%, things should fit a little better.
Rough guess without working example, though.