Contrib.social

Gin compatibility: Small screen vertical toolbar submenu items margin too big

Open on Drupal.org →
Created on 15 June 2023, over 1 year ago
Updated 31 January 2024, 10 months ago

On small screens, where the vertical menu extends children down instead of popping out to the side, the submenu items have a huge margin that makes them unreadable. See attached screenshots for current and desired behavior.

It's due to this section in environment_indicator.css:

[dir="ltr"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
  margin-left: calc(var(--gin-toolbar-width-collapsed, var(--ginToolbarWidthCollapsed)) - 4px);
}

To fix it, a media tag with a min-width should be added to the above. Gin uses its 'medium' breakpoint which is 976px converted to em which is 61em. So something like:

@media (min-width: 61em) {
  [dir="ltr"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
    margin-left: calc(var(--gin-toolbar-width-collapsed, var(--ginToolbarWidthCollapsed)) - 4px);
  }
}

And add a default 3px margin-left so the environment indicator border is visible.

[dir="ltr"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
  3px;
}

NOTE: this may apply to rtl as well, but I didn't test that.

🐛 Bug report
Status

Closed: duplicate

Version

4.0

Component

Code

Created by

🇺🇸United States jvogt Seattle, WA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024