Contrib.social

Long titles can cause the secondary toolbar to exceed the width of the viewport

Open on Drupal.org →
Created on 3 February 2023, about 2 years ago
Updated 10 February 2023, about 2 years ago

Problem/Motivation

Nodes with long titles result in a long breadcrumb in the secondary toolbar. This can break the toolbar's flex layout, causing it to overflow the viewport.

See the attached image for an example.

Steps to reproduce

  1. Install/enable Gin Toolbar.
  2. Select either the Gin Vertical (default) or Modern, Horizontal toolbar.
  3. Enable Gin's "Show Secondary Toolbar in Frontend" settings.
  4. Create a node with a very long title.
  5. View the node at a smaller screen size. (For me, the issue is usually present at around 1390px and below, so not really that small).
  6. The right-most toolbar item will overflow the viewport.

Proposed resolution

Based on this from Stack Overflow, I was able to correct it by adding either a min-width or overflow: hidden to the gin-breadcrumb-wrapper's parent element, so for example:

.gin-secondary-toolbar__layout-container {
  min-width: 1px; 
  /* min-width: 0 or overflow: hidden work just as well */
}

I would offer a patch, but I'm not set up to compile the sass at the moment.

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States justcaldwell Austin, Texas

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