# Long Words not Wrapping in User Activity Page
**URL:** https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181
**Category:** Bug
**Created:** [August 16, 2017, 8:12pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181 "2017-08-16T20:12:51Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 16, 2017, 8:12pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/1 "2017-08-16T20:12:52Z")
**Reproduction Steps:**
1. Bookmark this topic: [Allow for pre-registration of fully activated accounts via API without user interaction](https://meta.discourse.org/t/allow-for-pre-registration-of-fully-activated-accounts-via-api-without-user-interaction/60339)
2. Check your bookmarks page, and you will see something similar to:
**Possible Root Cause**
This page is styled using a table layout. I found [this commit](https://github.com/discourse/discourse/commit/1444025e9ca7c71c26706c8c99ace94878071ca4) 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](https://github.com/discourse/discourse/commit/1444025e9ca7c71c26706c8c99ace94878071ca4) 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.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [August 17, 2017, 12:52am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/2 "2017-08-17T00:52:53Z")
I would recommend simply reverting the commit @codinghorror ?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 17, 2017, 1:17am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/3 "2017-08-17T01:17:08Z")
Why not just add `word-break: break-word;` to the CSS of the HTML element container? Much simpler.
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 17, 2017, 1:28am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/4 "2017-08-17T01:28:24Z")
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:
.
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 17, 2017, 2:21am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/5 "2017-08-17T02:21:21Z")
Probably good to keep layout more similar to mobile so go ahead with that.
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 17, 2017, 3:54am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/6 "2017-08-17T03:54:16Z")
PR’s up
>
>
> \> DISCUSSION & SCREENSHOTS: https://meta.discourse.org/t/long-words-not-wrapping…-in-user-activity-page/68181
>
> By default, the width of a table and its cells are adjusted to fit the content. Thus, longer words are not wrapped and lead to a wider width.
* * *
**Screenshot**
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2017, 3:48am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/7 "2017-08-18T03:48:10Z")
Hmm this regressed on iPad, now it is exceeding the available space and making everything tiny.
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 18, 2017, 3:50am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/8 "2017-08-18T03:50:21Z")
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:
So I am suggesting to [remove `width: 900px` on `.user-right`.](https://github.com/discourse/discourse/blob/8e8653a30085f9cd1c5047da3aca2e8c1eeb87c8/app/assets/stylesheets/desktop/user.scss#L146)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2017, 4:56am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/9 "2017-08-18T04:56:11Z")
Sure feel free to submit PR on that!
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 18, 2017, 5:20am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/10 "2017-08-18T05:20:56Z")
PR round 2:
[https://github.com/discourse/discourse/pull/5060](https://github.com/discourse/discourse/pull/5060)
Sorry about that!
###### _CSS bites…_ when I am not careful enough…
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [August 18, 2017, 2:45pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/11 "2017-08-18T14:45:11Z")
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?
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 18, 2017, 7:06pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/12 "2017-08-18T19:06:22Z")
I certainly tested it with everything I had on OSX. ~~~On which platforms and browsers were this broken?~~~
* * *
Oh it’s a different tab. 🤦♂️
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2017, 7:30pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/13 "2017-08-18T19:30:08Z")
> [@xrav3nz](#):
>
> 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.
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
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [August 18, 2017, 7:34pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/14 "2017-08-18T19:34:16Z")
> [@codinghorror](#):
>
> I strongly urge you to reconsider word-break: break-word;
It’s already there:
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2017, 7:34pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/15 "2017-08-18T19:34:56Z")
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).
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 18, 2017, 7:54pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/16 "2017-08-18T19:54:42Z")
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.
* * *
> [@codinghorror](#):
>
> I strongly urge you to reconsider word-break: break-word
I know I am guilty of breaking it twice ☹:
- 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?
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [August 19, 2017, 1:31am UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/18 "2017-08-19T01:31:10Z")
One last attempt to fix it following the table layout rules.
[https://github.com/discourse/discourse/pull/5068](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. 🎉
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 6, 2018, 11:27pm UTC](https://meta.discourse.org/t/long-words-not-wrapping-in-user-activity-page/68181/19 "2018-02-06T23:27:19Z")