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.

CommentFileSizeAuthor
#1 1896894-seven-scrollbar-1.patch945 bytesjessebeach

Comments

jessebeach’s picture

jessebeach commented
Status: Active » Needs review
StatusFileSize
new 1896894-seven-scrollbar-1.patch945 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.

jessebeach’s picture

jessebeach commented
Status: Needs review » Closed (duplicate)

Beaten to it: #1872606: Single Column admin pages, details summary causes scrollbar