Theme info is obscured in Firefox using new themes admin page

[scottsweb]

In Firefox 26.0 the theme information is obscured by theme options panel on the Appearance -> Themes admin screen. I am unable to scroll and correctly read the content under options at the bottom:

[scottsweb]

Patch uploaded. Padding height has been moved to the :after pseudo selector which works consistently across Firefox (26.0), Chrome (32) and Safari (6.1).

[azaozz]

26192.diff fixes the problem partially. When there is a vertical scrollbar, it still slips behind the "footer" making it look somewhat broken/unfinished.

Also the buttons are about twice the size of all other buttons in the admin. This may be good for small screens but looks a bit awkward on laptops and desktops.

Thinking the structural CSS for this box would need more attention:

• Responsive styling.
• Improved usability: the "header" with the close button should be always visible, similarly to the media modal.
• The "footer" should be under the scrollable middle part, so the vertical scrollbar doesn't hide behind it.
• The size of the buttons should be same or similar to all other buttons in the admin.

[shaunandrews]

In 26192.2.diff​

• Resolves the issue where the footer overlapped the content of the modal - this also means we lose the "cool" transparency of the modal footer. - Since this affects the positioning of the modal, I've rolled in the patch from the stale #25961.
• This also addresses the size of the buttons, including the delete button which needs to have a few classes added so it matches the size of the other buttons.
• Adjusts the left position of the modal in the case where the admin menu is collapse (or, folded).

[shaunandrews]

Replying to azaozz:

• Responsive styling.

What's wrong with the responsive styling?

[azaozz]

The responsive styling looks good. Was referring to how button/touch areas sizes are changed in the menu and toolbar on smaller screens.

26192.2.diff works much better. Perhaps the "header" should get the same treatment as the "footer", i.e. reduce the size of the buttons but make them bigger on small/touch screens.

Also it still feels awkward how the "close" button in the top/right corner scrolls off the screen but the rest of the controls (Activate, Preview, Delete) stay fixed at the bottom regardless of scrolling.

[ocean90]

26192.2.diff looks good, but we have to improve it. I would vote for a markup change here, see also azaozz's comment. The header should have a fixed position.

Adding margin-bottom: 69px; to .theme-overlay .theme-wrap doesn't work in Opera 12 and removes the box-shadow at bottom.

[dd32]

26192.3.diff​ is a refresh of 26192.2.diff​

I agree with the comments above, it seems like:

• Header needs to be fixed rather than scroll
• Opera 12 support
• Bottom toolbox appears to be floating alone, it's outside of the box-shadow (This might be a patch merge fail of mine)

[dd32]

In 26519:

Themes: Make the Theme Detail view div use more of the available viewport, Fix the Header and Footer in the viewport and only scroll the theme details, Prefix some more theme CSS classes. Props shaunandrews for the initial viewport patch. Fixes #25961, #26192

[dd32]

In 26520:

Themes: Indent the HTML for proper indentation after r26519 added an extra div. See #25961, #26192