Expanded responsive view overflows screen

dimichele

Link to test case:
https://registeredcitizens.com/residency-restrictions/

Description of problem:

I am using datatables inside Wordpress successfully on a computer. On a cellphone, mine is a Pixel 3a XL, the collapsed table is beautiful. However, when I click the expand icon the table expands but a lot of the data overflows the right side of the screen and I can't scroll to the right to see all of the data.

If you goto my link above, open the developer console, and turn on responsive mode, then choose the Pixel 2 XL or resize the screen to under 575 wide you can see what I am talking about.

I am using Chrome on the Pixel phone.

Is there to force the expanded view of the table to behave on a cellphone when there is a lot of content in the data cells and the phone resolution is less than 575 pixels?

Thanks in advance.

allan

Its the link text that is causing the issue:

Interestingly, in Firefox it automatically breaks the link text over lines even if there is no white space.

To get the same in Chrome:

td a {
  word-break: break-word;
}

Allan