User Interface: Modal
6 months ago
6 months ago


(Reporter: billm, Assigned: emceeaich)





(4 attachments, 2 obsolete attachments)



6 months ago
Created attachment 8842595 [details]

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 so the surface area of a change is small.

Comment 4

6 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

Attachment #8842615 - Flags: review+

Comment 7

6 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

6 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.

Also to attach the pull request you use the prettier url:

(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

Attachment #8843474 - Flags: review?(dylan) → review+
   0801b45a5..df64b724f  master -> master
Last Resolved: 6 months ago
Resolution: --- → FIXED
Blocks: 1345949
You need to log in before you can comment on or make changes to this bug.