Since we introduced a max-width for the panel button label (bug 1009604), the button overflows in a weird way (see attached screenshot: blue outline: toolbarbutton, red outline: label). Basically, the size of the parent node of the label is computed like if the label didn't get cropped. That forces the toolbar button to overlap with the controls, making clicking these controls difficult. I didn't manage to fix that in a simple way (just adding a max-width doesn't work). What works is to set the "width" of the label to 150px, but then, it doesn't shrink (but it's better than having an overlap).

Also - if the title is very very large, it resizes the whole window.

Yeah, I see what you mean. I fiddle with this for a while, but didn't really get very far. XUL never does what I want... :( Should we do width, or do you think you can invent a fix here?

Paul and I agreed over email to land this temporary fix, so the project button at least doesn't cover the action buttons.

A more simple solution is to set a max-width on the button and -moz-box-flex:1 on the label. Like so: #project-panel-button { max-width: calc(50vw - 100px); } #project-panel-button > .panel-button-label { -moz-box-flex: 1; } Using a calc to make a max-width that will allow space for the control buttons.

(In reply to Alfred Kayser from comment #6) > A more simple solution is to set a max-width on the button and > -moz-box-flex:1 on the label. > > Like so: > > #project-panel-button { > max-width: calc(50vw - 100px); > } > #project-panel-button > .panel-button-label { > -moz-box-flex: 1; > } > > Using a calc to make a max-width that will allow space for the control > buttons. I like that! Thanks a lot.

Comment on attachment 8485786 [details] [diff] [review] actual fix Review of attachment 8485786 [details] [diff] [review]: ----------------------------------------------------------------- Looks good here!