User list tables overflowing parent div?

UX
1

Hi there!

I’m currently learning about Discourse for a future forum in portuguese and noticed that some tables are overflowing its parent div:

image
image1254×829 190 KB

image
image1395×665 152 KB

These examples were taken with the graceful theme, but this also happens with the default theme.
Is this something that has been talked about before or should I open an issue about it?
Thanks! :smiley:

2

I think it’s a theme specific issue, I don’t see it on my theme.

image
image956×293 11.2 KB

3

Try to change the language, in my case this happens because the table headers are a bit large in comparison to english.
If I trim the all those table headers to only one word the table width goes back to its parent div width (1110px in my case), but in my case the headers are a bit large so the table gets wider than its parent div.

4

I just did, still no issue. I think it’s because your theme has a smaller container size because of that big padding/margins I see. I have on my theme a max-width of 1250px. Either increase the container size by adding

.wrap {
max-width: 1250px;
}

or try to decrease those margins.

image

1 Like
5

This is on a brand new local install without any customizations, just changed the language and opened the users table:

image
image1304×385 50 KB

6

I’m in a good mood today, send me the link of your board and I’ll take a quick look for you if you want :slight_smile:

1 Like
7

That’s a different page – looks like the /users page, whereas the screenshot in the first post is the admin users list. I’ll clarify by editing the first post.

8

Jeff, the second image is from the /users page.
Sorry, I should’ve taken new screenshots with the default theme.

Here’s the link of the board with the default theme:
https://abreojogo.flying-ape.com/u

9

I think i found it. I wasn’t able to see it on my theme cause I have 1250px max-width so it’s bigger.
Add this in your Desktop tab:

body .directory table th.sortable {
    white-space: initial;
}

By desktop tab I mean here:

image
image804×406 23.3 KB

Edit: @codinghorror Yes Jeff it’s present in the default theme also because of that
white-space: nowrap; on discourse.scss line 312.

2 Likes
10

Thank you Cos, that fixes it! :star_struck:
I also added this to fix the same issue in the /admin/users page:

body .admin-contents table th.sortable {
    white-space: initial;
}
1 Like
11

This highlights a bit of a problem with infinite scroll and wide tables… I demonstrate it here:

The current behavior is that we scroll the entire application horizontally in these cases… we usually try to avoid that, but if you check out the second half of the video you see the where solving it can make things worse. If we hide the overflow and add a horizontal scrollbar to only scroll the table overflow, the scrollbar is at the bottom of the table and not fixed to the bottom of the viewport… so it’s really hard to reach when we’re loading new results as you go.

I think the best option is to probably add another scrollbar at the top of overflowing tables with some JS?

1 Like
12

Yes, the second part with the solution is worse.
To me the problem with the wide tables overflowing is that it breaks the design of the page, with everything else in the page properly contained and aligned.

But I guess there’s no easy solution for this and the best fix for now is to avoid having these wide tables in the first place.

1 Like