search

mozillabrasil / sumo_live_helper

Helper Add-on for SUMO forum contributors
https://addons.mozilla.org/firefox/addon/sumo-live-helper-/
Mozilla Public License 2.0
7 stars 8 forks source link

Sidebar content doesn't wrap correctly #108

Closed dannycolin closed 4 years ago

dannycolin commented 4 years ago

Step to reproduce

  1. Open the sidebar
  2. Reduce its size as much as you can

Actual Behavior

When you reduce the sidebar and there's enough content to fill the whole sidebar, part of the content is hidden.

Expected Behavior

Sidebar content (especially the question title) should wrap correctly no matter the number of questions.

See: screenshot

WesleyBranton commented 4 years ago

This might be an OS-specific issue. What are you using? I can't reproduce it on Windows 10. I'm able to reduce my sidebar width to ~250px before it clips.

dannycolin commented 4 years ago

This might be an OS-specific issue. What are you using?

I use a custom installation of Fedora 31 (with Xorg).

I'm able to reduce my sidebar width to ~250px before it clips.

It shouldn't clip at all. I guess I'll have to tweak the CSS Grid properties a bit. However, I don't think it's something that prevents us from releasing 1.2.0.

WesleyBranton commented 4 years ago

It should clip eventually, shouldn't it? Since the button and the product icon take up a certain amount of space, there will eventually not be enough space to show everything, especially once you factor in the scrollbar size.

dannycolin commented 4 years ago

It should clip eventually, shouldn't it?

Technically yes, but it should only happen if the text wraps to its smallest possible size which is the size of the longest word in that column. I'll see what I can do to prevent it from clipping without affecting the usability. Anyway, like I said it's not very urgent so I'll tag it as P2.

WesleyBranton commented 4 years ago

I do have this issue on my laptop. It has a smaller screen than my desktop, so obviously screen size plays a role.

WesleyBranton commented 4 years ago

It's the word wrapping that's causing the problem, since it can't wrap mid-words. For example, someone posted a question called V71 SSL_ERROR_HANDSHAKE_FAILURE_ALERT but no mention of changes to SSL system and, because "SSL_ERROR_HANDSHAKE_FAILURE_ALERT" is treated as one big word, it breaks the word-wrapping and makes the sidebar content overflow.

Using the CSS property word-wrap: break-word might help reduce the problem by breaking apart words that can't be displayed on a single line.

dannycolin commented 4 years ago

I don't think there was a long word like that when I hit the problem (see screenshot). However, maybe there was one in the hidden questions. I'll try to reproduce it with dummy text.

Using the CSS property word-wrap: break-word might help reduce the problem by breaking apart words that can't be displayed on a single line.

I'll try to play with word-break. Thanks for the tip.

dannycolin commented 4 years ago

Got it. :) break-word has been deprecated and we now need to use:

word-break: normal;
overflow-wrap: anywhere;