Width declaration on summary elements in the Seven theme trigger a horizontal scrollbar at narrow widths [#1896894]

The scrollbar is triggered because Seven declares summary elements to be width 100% on narrow devices (less than 600px wide).

  details summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

But system.theme.css gives summary elements left/right padding.

summary {
  padding: 0.2em 0.5em;
}

So summary elements bust out of their containers given the content-box box model width sizing. The summary element is already a display block, so it doesn't need its width set to 100%. I verified that removing the width doesn't break the ellipsing.

Here is an image to illustrate:

Screenshot of the Seven admin theme at a narrow width with a horizontal scrollbar present even though it should not be present.

Comment	File	Size	Author
#1	1896894-seven-scrollbar-1.patch	945 bytes	jessebeach
#1

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

jessebeach CreditAttribution: jessebeach commented 23 January 2013 at 19:33

Status:

Active

» Needs review

File	Size
1896894-seven-scrollbar-1.patch	945 bytes

This is a one-line patch. The summary element is already a block, so it's unnecessary to declare its width to be 100%. It will do that automatically.