1343663 - Comments are too wide

Status: RESOLVED FIXED

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

Description

[Bill McCloskey [inactive unless it's an emergency] (:billm)]

Attachment: screenshot-wide.png

I'm having some trouble reading through comments in the new bugzilla theme. They used to wrap at a reasonable width. Now the comment takes up most of the width of the screen. I find it hard to read lines that are that wide.

A lot of websites I see use a max-width setting or something to ensure that you don't have to scan across really long lines when you have a large browser window. I think this is good practice.

I'm attaching a screenshot to show what I'm seeing.

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: Centered, 960px

Idea One: go to a more common max-width 960px instead of 1200px;

Comment 2

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: Left aligned, 960px

Idea Two: shift back to left and set a smaller max width

Comment 3

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

One thing I could do is screen shot alternatives and do some research with users.

I think the CSS for this is isolated to https://github.com/mozilla-bteam/bmo/blob/master/extensions/BugModal/web/bug_modal.css so the surface area of a change is small.

Comment 4

[Bill McCloskey [inactive unless it's an emergency] (:billm)]

Thanks Emma! I think I slightly prefer the left alignment, but both are much better for me than the default.

Comment 5

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

After a day of using this I have the same opinion. 960, centered is the path of least resistance. Alternatively we can revert the centralize patch.

Comment 6

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

Comment on attachment 8842615 [details]
Centered, 960px

r=dylan

Comment 7

[April King [:April]]

I would recommend something like 60em / 72em, as it will scale if you ever change your font size.  That puts you at 780 and 936 pixels, respectively, which I find to be pretty legible for a fixed width font.

Hopefully once we have Markdown support, we can move away from using fixed width fonts for everything?  Maybe?  :)

Comment 8

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

I'm taking this and will incorporate :April's suggestions into the new patch. Hopefully mixing ems and pixels won't cause a problem. No pun intended.

Comment 9

[April King [:April]]

1em == the computed font size of the element its applied.  Currently you have font-size: 13px, so 1em == 13px.  :)

There shouldn't, in general, be issues with mixing them.  Typically one would set the font-size on body, and then use ems for the rest of it.

Comment 10

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: CSS Patch

Link to proposed patch on BMO GitHub repo.

Comment 11

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

Comment on attachment 8843162 [details] [diff] [review]
CSS Patch

r- the size actually occurs in a few places in that file.


https://github.com/emceeaich/bmo/blob/579e94028203e1c493d6361e8080cb807a35ef8a/extensions/BugModal/web/bug_modal.css#L392
https://github.com/emceeaich/bmo/blob/579e94028203e1c493d6361e8080cb807a35ef8a/extensions/BugModal/web/bug_modal.css#L705


Also to attach the pull request you use the prettier url: https://github.com/mozilla-bteam/bmo/pull/46

(I'll poke autolander to do this for bmo repo too)

Comment 12

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: Updated CSS Patch

Updated patch incorporating :dylan's comments

Comment 13

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: Updated CSS Patch

Incorporating more feedback from :dylan

Comment 14

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

Comment on attachment 8843474 [details] [review]
Updated CSS Patch

r=dylan

Comment 15

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

To [e-mail]:mozilla-bteam/bmo.git
   0801b45a5..df64b724f  master -> master