Status

()

bugzilla.mozilla.org
User Interface: Modal
P2
normal
RESOLVED FIXED
4 months ago
4 months ago

People

(Reporter: billm, Assigned: emceeaich)

Tracking

Production

Details

Attachments

(4 attachments, 2 obsolete attachments)

(Reporter)

Description

4 months ago
Created attachment 8842595 [details]
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.
Created attachment 8842615 [details]
Centered, 960px

Idea One: go to a more common max-width 960px instead of 1200px;
Created attachment 8842616 [details]
Left aligned, 960px

Idea Two: shift back to left and set a smaller max width
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.
(Reporter)

Comment 4

4 months ago
Thanks Emma! I think I slightly prefer the left alignment, but both are much better for me than the default.
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 on attachment 8842615 [details]
Centered, 960px

r=dylan
Attachment #8842615 - Flags: review+

Comment 7

4 months ago
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?  :)
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.
Assignee: nobody → ehumphries
Priority: -- → P2

Comment 9

4 months ago
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.
Created attachment 8843162 [details] [diff] [review]
CSS Patch

Link to proposed patch on BMO GitHub repo.
Attachment #8843162 - Flags: review?(dylan)
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)
Attachment #8843162 - Flags: review?(dylan) → review-
Created attachment 8843465 [details] [review]
Updated CSS Patch

Updated patch incorporating :dylan's comments
Attachment #8843162 - Attachment is obsolete: true
Attachment #8843465 - Flags: review?(dylan)
Created attachment 8843474 [details] [review]
Updated CSS Patch

Incorporating more feedback from :dylan
Attachment #8843465 - Attachment is obsolete: true
Attachment #8843465 - Flags: review?(dylan)
Attachment #8843474 - Flags: review?(dylan)
Comment on attachment 8843474 [details] [review]
Updated CSS Patch

r=dylan
Attachment #8843474 - Flags: review?(dylan) → review+
To git@github.com:mozilla-bteam/bmo.git
   0801b45a5..df64b724f  master -> master
Status: NEW → RESOLVED
Last Resolved: 4 months ago
Resolution: --- → FIXED
Blocks: 1345949
You need to log in before you can comment on or make changes to this bug.