Dataset search results page layout is broken by a long string in description

[PaulBoon]

A long text (without whitespace) in the dataset description overflows dataset search results and makes the page layout broken. See screenshot below. This is also visible in version 5.3 as well as on our 4.20 fork using

• Safari - Version 14.0.3 (15610.4.3.1.7, 15610)
• Chrome - Version 89.0.4389.82 (Official Build) (x86_64)
• Firefox - 86.0.1 (64-bits)

It is this dataset that is causing it: https://dataverse.nl/dataset.xhtml?persistentId=doi:10.34894/EPQT6D The description contains: ,"timestamp","tag.ID","longitude..decimal.degree.","latitude..decimal.degree.","height.above.mean.sea.level","ground.speed","heading","location.error.numerical","GNSS.satellite.count","GNSS.satellite.visible","GNSS.maximum.signal.strength","GNSS.fix.type","GNSS.time.to.fix","year","month","rowID","watersensor","watersensorfreq"

It is along string without whitespace, somehow the browser won’t break at the ',' it seems to need whitespace. We could ask the depositor change the metadata, add whitespace after the ',', but this should be solved by CSS.

[PaulBoon]

Looking at https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ we can find a solution. If we put the following in the CSS (custom for testing is fine now), it seems to be fixed.

/* Fix broken page layout caused by a long string in description metadata */
.datasetResult {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}

You can use the :StyleCustomizationFile setting to specify our custom CSS file with this fix in it. It should be solved in the standard CSS that Dataverse is using and we might investigate what other webpages suffer from this potential (but low probability) problem.

[poikilotherm]

Firefox 86.0.1, adding word-break: break-word on the td is also necessary:

Looks like it should be supported in all relevant browsers: https://caniuse.com/mdn-css_properties_word-break_break-word

[PaulBoon]

My focus was on the root verse page, which is very prominent, but the dataset landing page (for that specific dataset) is also suffering from this layout problem. Your suggestion @poikilotherm is then to do the fix also for .metadata-container table.metadata td. Other places that might suffer are places that contain user input that allows long strings, maybe someone from the 'UI-team' can dive into this and do a PR for the next release.

[mheppler]

@PaulBoon @poikilotherm -- I heard someone blow the "UI-team" horn, so here I am!

This issue has been know (#1249), but not solved. I've recently done some digging on best practices for truncating checksums #6685 and unfortunately there are no perfect solutions. The word-break solution is a difficult weapon to wield against the description field because there is no controlling the breaks.

In the css-tricks example, it is easy to apply the word-break property to a single URL, but in our description fields, where the content is dynamic, it is harder to apply this CSS because it has many unintended consequences. While doing some research on how other sites handle long strings, I did some browser developer tool hacking of the source code on the MDN Web Docs site from Mozilla. When I copy the example string from above into the content of their page, it behaves the same way our pages do, with the long string blowing out the width of the page in order to display the string in full.

Having seen that in my development of efforts to truncate checksum strings in our UI (which are far less dynamic and we have far more control of displaying in the UI), I decided that I would not try to solve the description long strings in that effort, and try to address it again in a later effort.

I will continue to research this and see what I can come up with. It might not be as easy as applying a single CSS property to the containers that display dynamic description values, but hopefully we can find something that solves this issues without unintentionally breaking other content.

[poikilotherm]

Would using sth. like https://mnater.github.io/Hyphenopoly (which is the successor of the widely known https://github.com/mnater/Hyphenator) help? Used this before for justified layouts, but maybe this is helpful here, too?