Data overlapping in portrait orientation on mobile devices

Hi, I'm not sure if this is an issue or that I am doing something wrong.
I'm using the option `responsive: "stacked"`, in landscape orientation the data appears fine,
but on an iPhone 8 for example in portrait mode the data overlaps.

## Expected Behavior

## Current Behavior

## Steps to Reproduce (for bugs)
I noticed that using Chrome dev tools and reducing the width of the screen to below
525 pixel the items overlap as can be seen in the current behaviour screenshot.

Another person who created this [code sandbox](https://codesandbox.io/s/k22kzo8zzv) for their own project they don't appear to have that problem at all, possibly is it because their columns and rows contain little data.

## Your Environment
This is my implementation of the `mui-datatables`

```
`import React from "react";
import MUIDataTable from "mui-datatables";
import moment from "moment";
// noinspection ES6CheckImport
import { useHistory } from "react-router-dom";

function RecordTable({ forms }) {
let history = useHistory();
const customFields = JSON.parse(localStorage.getItem("customFields"));
let customFieldName = "";
if (Array.isArray(customFields) && customFields.length) {
customFieldName = customFields[0].customFieldName;
} else {
customFieldName = "Custom Field";
}
//const customFieldName = customFields?.[0]?.customFieldName || "Custom Field";

const columns = [
{
name: "childNames",
label: "Child Name",
options: {
filter: true,
customBodyRender: value => {
return

;
}
}
},
{
name: "timeIn",
label: "Time In",
options: {
sortDirection: "asc"
}
},
{
name: "timeOut",
label: "Time Out"
},
{
name: "parentName",
label: "Parent Name",
options: {
filter: true
}
},
{
name: "customFields",
label: customFieldName,
options: {
customBodyRender: value => {
if (
Array.isArray(value) &&
value.length &&
value[0].customFieldName === customFieldName
)
return ;
}
}
},
{
name: "docId",
options: {
display: "excluded"
}
},
{
name: "totalNumberOfOccupants",
options: {
display: "excluded"
}
},
{
name: "rulesOfPlay",
options: {
display: "excluded"
}
},
{
name: "parentsWaiver",
options: {
display: "excluded"
}
},
{
name: "parentSignature",
options: {
display: "excluded"
}
},
{
name: "notes",
options: {
display: "excluded"
}
}
];

const openViewDisclaimerPage = row => {
history.push("/viewform", { ...row });
};

const options = {
filter: false,
viewColumns: false,
print: false,
responsive: "stacked",
selectableRows: "none",
searchOpen: true,
downloadOptions: {
filename: "..." + new moment().format("LL") + ".csv"
},
searchPlaceholder: "Search records...",
onRowClick: row => {
console.log("row clicked ", row);
//columnNumber contains the docId
//change the columnNumber if docId is moved to another column
const columnNumber = 5;
let selectedRow = forms.find((form, index) => {
return form.docId === row[columnNumber];
});
console.log("selectedRow:", selectedRow);
openViewDisclaimerPage(selectedRow);
}
};

return (

);
}
export default RecordTable;
`
```

| Tech | Version |
|--------------|---------|
| Material-UI | 2.8.3 |
| MUI-datatables | 2.13.3 |
| React | 16.12.0 |
| browser | Chrome 79.0.3945.88 |
| etc | |

Start by reproducing the `responsive: "stacked"` table at widths below 525px using the issue's columns and data shape, then compare portrait and landscape behavior. Trace the stacked responsive entry point in the mui-datatables source and verify the result against the provided screenshots; done means long cell contents no longer overlap on narrow screens.

Written by the indexing model from the issue text.