Long Words not Wrapping in User Activity Page

Bug
1

Reproduction Steps:

  1. Bookmark this topic: Allow for pre-registration of fully activated accounts via API without user interaction

  2. Check your bookmarks page, and you will see something similar to:

    word wrap issue
    word wrap issue2814Ă—1138 174 KB

Possible Root Cause

This page is styled using a table layout. I found this commit that removes display: table on the parent container but display: table-row / table-cell are still applied to the children. By default, The widths of the table and its cells are adjusted to fit the content, and thus the right side is wider than expected.

Possible Solutions

  1. Revert this commit and add table-layout: fixed, so that the content of the table cells will not affect the width of the table.

  2. Drop the table layout completely, and restyle this page with other CSS techniques. (maybe float? I confess I am no expert in CSS)

I’d be happy to PR this fix once we have decided a general direction.

9 Likes
2

I would recommend simply reverting the commit @codinghorror ?

3

Why not just add word-break: break-word; to the CSS of the HTML element container? Much simpler.

4

Also looked into that option. Although it fixes the issue, but I think that’s neither needed nor intended, from a semantic point of view.

word-wrap: break-word works just fine on mobile, because it’s not using the table layout:

image
image.png762Ă—1348 72.5 KB
.

If we were to continue using the table layout, IMHO, table-layout: fixed is the right fix. But again, I’m just laying out the options here.

2 Likes
5

Probably good to keep layout more similar to mobile so go ahead with that.

6

PR’s up

https://github.com/discourse/discourse/pull/5056

Screenshot

wordwrapfixed
wordwrapfixed2290Ă—1092 182 KB

5 Likes
7

Hmm this regressed on iPad, now it is exceeding the available space and making everything tiny.

8

I’ll take a look right now

Found out why it’s acting up. @codinghorror best to illustrate with an example that mimics the layout of the user activity page:

table-width-demo
table-width-demo1268Ă—842 73.6 KB

So I am suggesting to remove width: 900px on .user-right.

2 Likes
9

Sure feel free to submit PR on that!

2 Likes
10

PR round 2:

https://github.com/discourse/discourse/pull/5060

Sorry about that!

CSS bites… when I am not careful enough…
5 Likes
11

This really broke the user page, so I reverted it this morning. There was a huge amount of whitespace between everything.

Did you test this PR before making it?

12

I certainly tested it with everything I had on OSX. ~On which platforms and browsers were this broken?~

Oh it’s a different tab. :man_facepalming:

image

This is the CSS for the right column on preferences tab: it has two width properties. I dropped the 900px and the 170px took effect. How did this work before…

Will go through user.scss carefully and have a more complete PR up; will also have someone else test the view this time.

2 Likes
13

I strongly urge you to reconsider word-break: break-word; given that

  • we broke ipad on this already
  • we’ve broken it further with each CSS change
1 Like
14

It’s already there:
46

15

I don’t think it’s on the correct element, because in my F12 browser testing I had to add it another place for it to work (unless it got added recently).

1 Like
16

That’s the correct element; it has word-wrap: break_word set but not break-word: break-word.

word-wrap on its own should work, but it failed to do the job because:

This page is styled using a table layout. … By default, The widths of the table and its cells are adjusted to fit the content, and thus the right side is wider than expected.

I know I am guilty of breaking it twice :frowning::

  • It shouldn’t need to have word-break: break-word.
  • Some inconsistencies in the existing CSS bit us. i.e. setting two different widths for the same element at two different places. This could potentially cause more problems but “luckily” everything just works right now.
  • Although going through user.scss may take some time and some serious testing / review, maybe it will help in the long run?

But again: I agree with you, that word-break: break-word can make it work, and I agree making it work is a priority.

What do you think?

18

One last attempt to fix it following the table layout rules.

https://github.com/discourse/discourse/pull/5068

Should this fail to work / cause any other new problems, I will revert everything and use word-break: break-word.

@david and I both tested the change to make sure it a) fixes the previous bugs and b) does not cause new bugs. Mad props to him. :tada:

3 Likes