search

eternagame / eterna-mobile

Eterna mobile app
BSD 3-Clause "New" or "Revised" License
3 stars 0 forks source link

Fix sidebar text and scrolling behavior #38

Closed tkaragianes closed 2 years ago

tkaragianes commented 2 years ago

When the sidebar description contains sequence strings, it didn't wrap appropriately. overflow-wrap and overflow: auto address that behavior. Closes #25 and #27.

tkaragianes commented 2 years ago

As a comment for the future, the current two column design and implementation has some confusing overflow/flex layout decisions that will need to be addressed in refactor.

luxaritas commented 2 years ago

On the current website, we do white-space: pre-wrap; overflow-wrap: break-word;. Which is the better way to handle this (and is there a difference compared with overflow-wrap: break-word; in any way)?

tkaragianes commented 2 years ago

white-space is used for "Whether and how white space is collapsed, and Whether lines may wrap at soft-wrap opportunities."-MDN This doesn't apply to the sequence strings, because there is no whitespace in them.

From the same MDN article, "Note: To make words break within themselves, use overflow-wrap, word-break, or hyphens instead." word-break: break-word is deprecated, so I used overflow-wrap: break-word (which as you mentioned is the same as the website). We can add white-space: pre-wrap here, but it won't impact the fundamental concern raised of sequence string overflow.

One problem with this fix is that this is defined on a component level, when this ought to be at the design system level. Will be something to be aware of as we build out a proper design system.

luxaritas commented 2 years ago

Revisiting this I think I got confused. I somehow thought the website was using something other than overflow-wrap: break-word;, but it's just white-space: pre-wrap; in addition. I think the pre-wrap is necessary because things like descriptions may have newline characters instead of line breaks or paragraphs. Let's do white-space: pre-wrap; overflow-wrap: break-word; for all long-form user provided text (namely, the description field on both puzzles and labs)