453337 - enter_bug (New Bug) UI bounces up and down when you change the component because description changes height

Status: RESOLVED FIXED

(Bugzilla :: User Interface, defect, P1)

Description

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

Attachment: new bug ui screenshot, from 1920x1200 display

The enter new bug UI now takes up enormous amounts of screen real estate -- there is significant wasted white space on the left (see attachment).  Also, as you select components, the rest of the page bounces up and down because the 'component description' block constantly changes size.

Comment 1

[Dave Miller [:justdave]]

Based on your screenshot, it appears to be the fault of the number of flags present.  The only way I can think of to fix this is to either put the flags in a scrollable box, or do something like bug 453279 with them.

Comment 2

[Tony Mechelynck [:tonymec]]

Attachment: new bug form without flags

Yes, the left size expands if there are many flags, compare the first screenshot with this one (which I took in fullscreen mode because my display isn't as high as the reporter's)

Comment 3

[Tony Mechelynck [:tonymec]]

P.S. I don't see the bug bouncing up and down as I select different components: could the different Bugzilla skin be a factor?

Comment 4

[Max Kanat-Alexander]

Let's focus this bug on one issue (one that we can fix easily) and then if you want, you can file another bug for the flags issue (which takes a bit more thought).

Comment 5

[Max Kanat-Alexander]

The fix here would be the max-height the box, if that works, and give it an overflow: auto.

Comment 6

[Tony Mechelynck [:tonymec]]

Oh, sorry, forget my comment #3, in Konqueror I do see up-down bouncing. I guess my userChrome.css makes what I see "better than default".

There was a mid-air, and I'm not retyping it because your comment #5 makes me think that the same fix ("height: 6em; overflow:auto" or something similar) could be applied to the <div> or <td> or whatever containing the component description.

Comment 7

[Tony Mechelynck [:tonymec]]

oops, sorry, I thought you were talking about fix-sizing the flags. I should go to sleep now and leave Bugzilla alone. Sorry.

Comment 8

[timeless]

i'm using dusk and the component descriptions for the first 4 or so components in core cause the bouncing.

could you fix that?

Comment 9

[timeless]

Attachment: decription changes layout

Comment 10

[Guy Pyrzak]

Attachment: fix for bouncing bug V1

Comment 11

[Max Kanat-Alexander]

Comment on attachment 336796 [details] [diff] [review]
fix for bouncing bug V1

I think heights make more sense in ex, not in em.

Also, nit: remove the space at the end of that fieldset.

Comment 12

[Max Kanat-Alexander]

Comment on attachment 336796 [details] [diff] [review]
fix for bouncing bug V1

And comp_desc is a fieldset, not a div.

Comment 13

[Guy Pyrzak]

Attachment: fix for bouncing bug V2

Comment 14

[Guy Pyrzak]

Attachment: fix for bouncing bug V3

Comment 15

[Max Kanat-Alexander]

Comment on attachment 336807 [details] [diff] [review]
fix for bouncing bug V3

Please remove that extra space at the end of the <fieldset> tag when you check this in.

Comment 16

[Guy Pyrzak]

Attachment: testcase for scroll not working in fieldset

Comment 17

[Frédéric Buclin]

How many lines are displayed at once? 4?

Comment 18

[Guy Pyrzak]

Attachment: fix for bouncing bug V4

max turns out (after looking at firebug) that there was already a rule for the comments area, so instead of adding all that other stuff i just gave it the height. Much cleaner patch

Comment 19

[Guy Pyrzak]

Checking in skins/standard/global.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/global.css,v  <--  global.css
new revision: 1.47.2.2; previous revision: 1.47.2.1
done

and 

Checking in skins/standard/global.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/global.css,v  <--  global.css
new revision: 1.49; previous revision: 1.48
done

Comment 20

[timeless]

Attachment: new bug ui screenshot - unacceptable

Comment 21

[Frédéric Buclin]

Could we make the description box taller? Having only two lines displayed at once is really painful to read. E.g. the User Interface description in the Bugzilla product is 9 lines long. Scrolling doesn't work because it jumps 3 lines at once and so you miss one line every 3 lines. You can test this yourself at https://bugzilla-stage-tip.mozilla.org/enter_bug.cgi?product=Bugzilla&component=User Interface

IMO, 4 or 5 lines should be displayed at once. Reopening!

Comment 22

[Frédéric Buclin]

Clearing approvals till the height is updated.

Comment 23

[Guy Pyrzak]

Attachment: patch with the hight bigger

Comment 24

[Frédéric Buclin]

Comment on attachment 339095 [details] [diff] [review]
patch with the hight bigger

>+    height: 10ex;

I discussed this with pyrzak on IRC, and for visual reasons, the bottom of the component select box and the bottom of the description box should be aligned. For this, we should do the following compromise: an height of 8ex for the desc box (so that 3.5-4 lines are displayed at once, which is fine) and a size of 6 for the component box (instead of the current value of 5).

Comment 25

[Guy Pyrzak]

Attachment: patch maybe final?

Comment 26

[Guy Pyrzak]

Attachment: Image of changes

Comment 27

[Frédéric Buclin]

Comment on attachment 339311 [details] [diff] [review]
patch maybe final?

Nah, you submitted the wrong patch. :)

Comment 28

[Guy Pyrzak]

Attachment: patch maybe final?

Comment 29

[Frédéric Buclin]

Comment on attachment 339334 [details] [diff] [review]
patch maybe final?

r=LpSolit

Comment 30

[Guy Pyrzak]

Checking in skins/standard/global.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/global.css,v  <--  global.css
new revision: 1.52; previous revision: 1.51
done
Checking in template/en/default/bug/create/create.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/bug/create/create.html.tmpl,v  <--  create.html.tmpl
new revision: 1.88; previous revision: 1.87
done


Checking in skins/standard/global.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/global.css,v  <--  global.css
new revision: 1.47.2.4; previous revision: 1.47.2.3
done
Checking in template/en/default/bug/create/create.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/bug/create/create.html.tmpl,v  <--  create.html.tmpl
new revision: 1.83.2.5; previous revision: 1.83.2.4
done