1429290 - Bugs now display too wide to fit in my window; reading bugs is much harder

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Boris Zbarsky [:bzbarsky]]

All bugs are suddenly showing horizontal scrollbars for me, making it very hard to read them (because every comment is partially outside the viewport).  This is a very recent change.

I dug around a bit into why this is happening.  There are a few causes:

1)  Under the <div id="module-tracking-content"> there are two divs (fields-lhs and fields-rhs) that both have "min-width:450px" specified.  This causes the <section id="module-tracking"> to end up 979px wide.

2)  Same thing for <section id="module-people">.

3)  Same thing for <section id="module-status">.

4)  The <div class="inner"> inside <header id="header"> has "width: 1024px" specified.

All of those are wider than my browser window (934px).

Comment 1

[:glob ✱]

yeah, this annoys me too :)  my standard window size is 960px (half of my widescreen monitor).

removing `position: absolute` from #wrapper fixes the layout of the comments, however the header's width is forced to 1024px so there's horiz scrolling.

Comment 2

[Kohei Yoshino [:kohei]]

Hmm. This is an unintentional side effect but I'm not sure if we should fix it. Generally speaking 1024px is the minimum content width and as you see Bugzilla doesn't adopt responsive design yet. This kind of issue is not hardly surprising.

Comment 3

[Kohei Yoshino [:kohei]]

s/not hardly surprising/hardly surprising/

Comment 4

[:glob ✱]

it is kinda surprising because it never was a problem even without responsive design :)

for now i have the following in my user-style for bmo:

#wrapper {
    position: initial !important;
}
#header .links .label {
    display: none !important;
}
#header .inner {
    width: auto !important;
}

Comment 5

[Boris Zbarsky [:bzbarsky]]

> Generally speaking 1024px is the minimum content width

In what sense?  Again, this is a recent regression; Bugzilla used to work just fine until a few days ago!

Again, this is a serious usability problem, and it's not clear why it was even introduced.  "I'm not sure we should fix it" is not really acceptable.

Comment 6

[Dylan Hardison [:dylan] (he/him)]

glob's fix results in a fairly major UI regression as well, at larger screen widths.

But what about s/1024/930/?

Comment 7

[Boris Zbarsky [:bzbarsky]]

Why is 930 the right value?

Common screen resolutions (ignoring cell phones) nowadays have widths like so: 1024, 1280, 1366, 1440, 1680, 1920.

You should expect people running at least 1920 and 1680 to want to have side-by-side windows, which means 840px or less for the 1680 case.  For that matter, people who have 1440 may well want side-by-side windows too.

Comment 8

[Dylan Hardison [:dylan] (he/him)]

I'm going to take that bug and make a pragmatic change to get us closer to the not-ideal-but-working behavior of a few weeks ago.

People will not like it for other reasons, but bug-comment reading will be better. This will be a stop-gap for proper responsive / reflowing design.

Comment 9

[Kohei Yoshino [:kohei]]

Attachment: pull request

This makes bug detail pages horizontal-scrollbar-free on window > 920px.

Comment 10

[Dylan Hardison [:dylan] (he/him)]

Dueling PRs now! We'll see which one is better:

https://github.com/mozilla-bteam/bmo/pull/365 or https://github.com/mozilla-bteam/bmo/pull/364.

Comment 11

[Dylan Hardison [:dylan] (he/him)]

Attachment: PR to make it so things less than 900px (down to 800px) work

With this change, it is mostly usable with displays as narrow as 800px.

Comment 12

[Dylan Hardison [:dylan] (he/him)]

The change is now on https://bugzilla-dev.allizom.org/show_bug.cgi?id=900, my patch (PR #365) is pending a review, and then I'll be live. :-)

Comment 13

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8941491 [details] [review]
PR to make it so things less than 900px (down to 800px) work

r=imadueme