#1870944: [Meta] Mobile friendly admin pages

Problem/Motivation

All single column admin pages with field set have a scroll in smaller screens.

Admin URL examples:

  • admin/appearance/settings/global
  • admin/appearance/settings/seven
  • admin/config/development/performance
  • admin/config/regional/settings

Proposed resolution

To be determined.

Remaining tasks

To be determined.

Files: 
CommentFileSizeAuthor
#7 details-summary-scrollbar-1872606-7.patch374 bytesechoz
PASSED: [[SimpleTest]]: [MySQL] 50,516 pass(es).
[ View ]
#6 details-summary-scrollbar-1872606-6.patch439 bytesechoz
PASSED: [[SimpleTest]]: [MySQL] 50,466 pass(es).
[ View ]
#3 seven-theme-scroll-600px&less.png457.46 KBShyamala

Comments

Proposed resolution

Remove min-width for id #overlay in core/modules/overlay/overlay-child.css file

Old Css

#overlay {
  display: table;
  margin: 0 auto;
  min-height: 100px;
  min-width: 700px;
  position: relative;
  padding: .2em;
  padding-bottom: 2em;
  padding-right: 26px; /* LTR */
  width: 88%;
}

New Css

#overlay {
  display: table;
  margin: 0 auto;
  min-height: 100px;
  position: relative;
  padding: .2em;
  padding-bottom: 2em;
  padding-right: 26px; /* LTR */
  width: 88%;
}

Add width for class .element-invisible in core/modules/system/system.base.css file

Old Css

.element-invisible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  overflow: hidden;
  height: 1px;
}

New Css

.element-invisible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  overflow: hidden;
  height: 1px;
  width:1px;
}

Could this get more context? I dont have a scrollbar? Atleast not an unexpected one?

Issue summary:View changes

Add link to meta

StatusFileSize
new457.46 KB

admin/structure: works fine, unable to replicate scroll on this page.

admin/appearance/settings/global & admin/appearance/settings/seven: Pages with field set have a very small scroll below 600px. Refer attached image.

Proposed resolution

Please ignore the Comment #1

Replace width and padding

Old

@media screen and (max-width: 600px)
details summary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}

New

@media screen and (max-width: 600px)
details summary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 96%;
padding-left:2%;
padding-right:2%;
}

Issue summary:View changes

Removed admin/structure - works fine

Issue summary:View changes

added admin/config/development/performance +
changed to All single column admin pages with field set

Title:Single Column admin pages in Small screensSingle Column admin pages with field sets

changed title

Title:Single Column admin pages with field sets Single Column admin pages, details summary causes scrollbar
Status:Active» Needs review
StatusFileSize
new439 bytes
PASSED: [[SimpleTest]]: [MySQL] 50,466 pass(es).
[ View ]

They are no longer fieldsets, this is caused by the details summary needing box-sizing: border-box;
Here's a patch.

StatusFileSize
new374 bytes
PASSED: [[SimpleTest]]: [MySQL] 50,516 pass(es).
[ View ]

box-sizing: border-box; did solve the issue, but not needed if the 100% width is not explicitly declared.
details summary does not need 100% width, this was a throwback from fieldset .fieldset-legend which was a span.
Here's the simpler patch.

Status:Needs review» Reviewed & tested by the community

Hi.

Tested the following pages with Chrome and iPhone and all of them are ok:

admin/appearance/settings/global
admin/appearance/settings/seven
admin/config/development/performance
admin/config/regional/settings

No horizontal scroll found on them.

Are there more pages to be tested?

I found some of them with horizontal scroll but it's due a content table, for example: admin/config/people/accounts/fields

The tiny scrollbar is indeed gone after this patch.

Status:Reviewed & tested by the community» Fixed

Committed to 8.x. Thanks.

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue summary:View changes

added admin/config/regional/settings