Материал UI и Bootstrap для настольных и мобильных

Question

Существуют ли параметры, которые необходимо соблюдать при работе с таблицей пользовательского интерфейса материалов, когда речь идет о настольных и мобильных представлениях?

У меня есть таблица пользовательского интерфейса материалов, которая отлично выглядит в представлении рабочего стола. Это также выглядит хорошо при переключении панели инструментов устройства в мобильное представление. Но когда я получаю доступ к той же таблице с помощью Chrome на Android или Safari на iPhone, графика таблицы прерывается.

Как это можно решить?

Код таблицы:

import { Typography, Paper, Table, TableHead, TableRow, TableCell, TableBody, IconButton } from '@material-ui/core';

...

public render() {
    return <div className='mask-task-list'>
        <Typography variant='h4' component='h2' className='header'>{this.maskTitle()}</Typography>
        <Paper className='scrollable-paper'>
            <Table className='table-min-width' aria-label='simple table' size='small'>
                <TableHead>
                    <TableRow>
                        <TableCell className='table-header-cell'>Company</TableCell>
                        <TableCell className='table-header-cell'>Category</TableCell>
                        <TableCell className='table-header-cell'>Start</TableCell>
                        <TableCell className='table-header-cell'>Stop</TableCell>
                        <TableCell className='table-header-cell'>Comment</TableCell>
                        <TableCell className='table-header-cell edit-column'>Edit</TableCell>
                        <TableCell className='table-header-cell delete-column'>Delete</TableCell>
                    </TableRow>
                </TableHead>
                {this.renderTasks(this.state.taskList)}
            </Table>
        </Paper>
    </div>;
}

CSS используется:

.scrollable-paper {
    width: 100%;
    overflow-x: auto;
}

.table-min-width {
    min-width: 650;
}

Используемые версии:

"@material-ui/core": "4.6.1",
"@types/react": "16.9.11",
"@types/react-dom": "16.9.4",
"bootstrap": "4.3.1",
"react": "16.11.0",
"react-dom": "16.11.0",
"typescript": "3.7.4",

Рабочий стол (выглядит хорошо):

Мобильный на рабочем столе (выглядит хорошо):

Mobile View 1 (с перерывами на правой стороне):

Mobile View 2 (разрывы на правой стороне):