Text extending beyond content area in CIAT XMLUI theme

[alanorth]

I need to look at other XMLUI themes and see if this is just an issue with CIAT or what. Item in screenshot is: https://cgspace.cgiar.org/handle/10568/54615.

[alanorth]

We've just realized that these items look fine in Firefox, but Chrome displays like the screenshot above. Need to investigate why the text doesn't wrap there!

[alanorth]

After a bit of tweaking, the following CSS in style.css fixes it in Chrome:

table.ds-includeSet-table {
  table-layout: fixed;
  width: 100%;
}

table.ds-includeSet-table td {
  word-wrap: break-word;
}

table.ds-includeSet-table td:first-child {
  width: 20%;
}

Basically, unless we use fixed-layout on the table, we can't set widths. Once we set the widths then we add the wrapping on word breaks. Arguably looks better in Firefox too.