dokka icon indicating copy to clipboard operation
dokka copied to clipboard
verified publisher icon Kotlin

Fix overflow of long names in HTML

Open seelchen opened this issue 2 years ago • 1 comments

This PR aims to fix the issue that long names sometimes overflow in the generated HTML pages.

The CSS property word-break: break-word is added to the root style to prevent any general overflows. ContentText nodes with the Monospace style are made breakable since long names can occur in code blocks as well.

Resolves #3241.

seelchen avatar Oct 20 '23 18:10 seelchen

I am currently stuck because a lot of tests that check the structure of the generated HTML elements fail. Since new span tags are added to make the text breakable, the structure is different than expected.

I can rewrite all expected structures in the failing tests but I would like to get some feedback first if my approach to this issue is fine with you.

seelchen avatar Oct 20 '23 19:10 seelchen

Hey! Thank you for PR and sorry for waiting. We are now in process of preparing a UI Kit which will specify what to do in such situations. On current moment it's not really clear what to do with overflow/word-wrapping in code-blocks:

  • in samples we provide horizontal scrolling
  • on mobile(small) screens we could have rather strange behaviour when word-wrapping happens

Here is an example from kotlinx.serialization on small screen: image So I would say, that may be current wrapping in code-blocks exists there for historical reasons, rather than intentional. And as this PR will change a lot of tests to adapt to changes, Im not sure that it's worth to do it right now until complete design will be ready.

Still, I think that adding word-break to root could be a good addition. @berezinant do you have anything against it? If not, It would be good to rebase PR and leave changes only regarding word-break style.

whyoleg avatar Mar 27 '24 14:03 whyoleg

Hi @seelchen! Thanks for the PR It seems that recently another fix was merged which also addresses the described problem with overflow https://github.com/Kotlin/dokka/pull/3415

I also noticed that the fix in .root affects different types of content e.g. markdown tables which start to behave differently than planned in Dokka's UI system (see example screenshot, we plan for tables to have minimum width on the small screens) image

It would be more convenient to work through such cases while implementing UI kit in Dokka, so that's why I suggest to close this PR for now

berezinant avatar Apr 25 '24 09:04 berezinant