connect message spacing fix

[mariocsee]

What type of PR is this?

• Bug Fix

Description

It seems like content in <code> and <pre> took precedence over other HTML elements in Connect. Rather than using the previous approach and forcing breaks in the line, I have added width assertions in CSS to prevent the channel list on the left and the channel content on the right from being squished. The code blocks and messages are capped and adjust to the opening and closing of content on the right.

One notable change I have made is that in mobile, is that when right content is opened, rather than pushing all others to the left, I decided to overlay it on top of the chat preventing a horizontal scroll from appearing on mobile pages.

Related Tickets & Documents

resolves #1256 and resolves #1257

Mobile & Desktop Screenshots/Recordings

Previous behavior in #1256 and #1257

Current behavior (desktop and tablet):

Firefox word-break:

Current behavior (mobile):

Added to documentation?

• no documentation needed

What gif best describes this PR or how it makes you feel?

[benhalpern]

Hmmm I think <pre> blocks should have horizontal scrolling as opposed to line breaks. I think this is the expected behavior with code.

[mariocsee]

Gotcha, I'll adjust styling for <pre> so that overflow horizontal scrolling happens so that the channel details and sidebar width isn't affected.

@benhalpern What are your thoughts on break-word to break-all so that strings on Firefox in #1257 are chopped (but then it breaks any word that isn't really long)? Should I instead adjust for overflow and allow horizontal scrolling?

[benhalpern]

For normal text we should not have scrolling and we should prefer to break words. I'm not totally sure about #1257 but don't see it as a critical issue to fix. Long words should be broken. I'm not sure about the details on how to do that exactly.

Horizontal scrolling should only apply to <pre> tags, just as it does in articles/comments on the site,

e.g.

https://dev.to/deciduously/comment/7bo3

[mariocsee]

Somehow the way Firefox handles break-word doesn't actually chop particular words into shorter segments, so I can't address #1257 without accepting the repercussions of using break-all.

After a lot of tinkering around, my hunch is that the problem of the <pre> code blocks in chat vs elsewhere is that its width isn't hard capped at a maximum, which explains why overflow-x doesn't seem like its working in chat but works in comments and articles. The length/size of its content in both <pre> and <code> always takes precedence over the determined max-width. In addition, individual code lines aren't wrapped in a <pre> tag like code blocks are and cannot be capped with max-width + overflow-x.

[mariocsee]

I just made some changes to the doc above and updated behavior! Focused on asserting width caps to prevent squeezing of other elements.

[mariocsee]

@benhalpern Just a progress update. All the changes I made are in css and mostly concerns adding a lot of min and max widths and flexbox to prevent too much squeezing and stretching of elements.

One major change is how additional content like user details and articles appear on mobile:

• currently, it pushes past the chat window to the right and creates a horizontal scroll, which I found not the most appealing experience
• my suggested alternative puts the content on top of the chat to prevent extending to the right and having the user scroll to the right before seeing the content fully

Let me know your thoughts on this when you get the chance to see and go through it.