#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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

vijay.cgs’s picture

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;
}
Bojhan’s picture

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

Bojhan’s picture

Issue summary: View changes

Add link to meta

Shyamala’s picture

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.

vijay.cgs’s picture

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%;
}
vijay.cgs’s picture

Issue summary: View changes

Removed admin/structure - works fine

Shyamala’s picture

Issue summary: View changes

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

Shyamala’s picture

Title: Single Column admin pages in Small screens » Single Column admin pages with field sets

changed title

echoz’s picture

Title: Single Column admin pages with field sets » Single Column admin pages, details summary causes scrollbar
Status: Active » Needs review
FileSize
439 bytes

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

echoz’s picture

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.

rteijeiro’s picture

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

moshe weitzman’s picture

The tiny scrollbar is indeed gone after this patch.

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to 8.x. Thanks.

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

Anonymous’s picture

Issue summary: View changes

added admin/config/regional/settings