Admin menu CSS causes horizontal scrollbar

I think that the problem lies in /admin_menu_toolbar/admin_menu_toolbar.css, line 29:

margin: 0 -20px;
padding: 0 20px;

Changing this to:

margin: 0;
padding: 0;

fixes the issue in Safari.

I'm seeing the same thing in the Seven theme. Here's a patch of the solution in #1.

The patch in #2 fixes this issue, which shows up in all themes, not just Garland and Seven.

That patch solved this for me too. It does mess with the shadowing a little bit - it now fades on the left and right, whereas before the shadow spanned the full width. It doesn't look bad, though, and is well worth getting rid of the horizontal scrollbar.

I don't agree with this solution. While it works, the drop-shadow looks incorrect at the left and right ends of the toolbar.

Alternative patch soon.

Here is a patch that fixes the horizontal scroll issue without making any design changes to the admin_menu.

Tested in (Mac) Safari (latest), Firefox 13.0.1, Chrome 19 w/ Seven, Bartik, Garland and Stark (all browsers, all themes).

Still requires additional review with Windows machines and IE.

oy. :) Can you explain a little what you've done? :)

E.g., why shifting the content box and border offset only on the left? (btw, did you test whether your trick still works with RTL?)

In general, did anyone test whether box-sizing: border-box; might help in any way?

I did not test in a RTL environment. I guess we gotta add that to the list too.

Explanation:
I first played around with the margin and padding settings. I quickly discovered that when setting the values to...

margin: 0 -20px 0 0;
padding: 0 20px 0 0;

...the horizontal scroll problem persisted. However, setting the margin/padding to...

margin: 0 0 0 -20px;
padding: 0 0 0 20px;

...produced no horizontal scroll (suggesting the right margin is to blame), made the box-shadow 20px wider to the left than the zero padding/margin patch, and produced no visual difference to the toolbar itself.

With the toolbar now 20px wider, I made the horizontal offset value of the box-shadow 10px, thus giving 10px to both the left and right edges and removing the drop-shadow fade out issue presented in the original patch.

Sorry, nothing more scientific. That's all the reasoning I have...

The above patches fail on when using a right to left language.

This one will work with rtl

margin: 0 -20px 0 0;
padding: 0 20px 0 0;

This one will work with ltr

margin: 0 0 0 -20px;
padding: 0 0 0 20px;

Here is a patch that should work in both rtl and ltr

@frob - I think you forgot the box-shadow fixes?

Right, there is more, I think there are some other problems with rtl that need to be addressed. Marking it back to needs work. I might have time to submit another patch later.

I see that the rtl broken dropdowns is not caused by my patch but is another issue being handled over at No dropdown menus in RTL language

So here is my new patch.

Great patch. That scrollbar was super annoying. Thanks.

This looks like a duplicate of #1683132: Extra 20px padding causes horizontal scrolling by now. Feel free to correct me if I'm mistaken.

Patch 14 fixed it for me too. Thx

Haven't test for ltr but patch at #14 solved the scroll bar issue for me on all major browsers.

#14 fixes this issue. a new release should be deployed :) thanks!

wiped