"Layout builder setting" overlay UX issues when used with gin horizontal toolbar

Created on 13 October 2023, 9 months ago
Updated 12 March 2024, 4 months ago

Problem/Motivation

When Gin Layout Builder is used with a Gin Horizontal toolbar (Vertical toolbar is ok) and a Gin Secondary toolbar, the "Layout builder setting" overlay sidebar may visually block the content without the ability to hide it. To hide the overlay, a user must scroll top to reveal a secondary toolbar with a hide button.

Steps to reproduce

1. Install Gin theme, Gin Layout Builder, set Gin as a default Admin theme
2. On /admin/appearance/settings/gin, set Navigation (Drupal Toolbar) to "Horizontal, Modern Toolbar", enable "Show Secondary Toolbar in Frontend" and Save
3. Enable Layout Builder for some Entity Display
4. Go to a page with Layout Builder
5. Click on "Show sidebar panel" button
6. Scroll until the secondary toolbar and the button is not visible
7. Try to hide the sidebar

Proposed resolution

The secondary toolbar should be sticky and visible on the whole layout builder page.
When using a Vertical toolbar, the Secondary toolbar is always visible. But with a horizontal sidebar, it seems to be intentionally hidden.

On Node edit page, there is a "header.region-sticky" element with a save button. The element scrolls with a page.
But in Gin LB we have the save button in the Gin Secondary toolbar.

I suppose if we stack 3 toolbars together, the UI will be too complex, that's why I believe it hides in Gin with a horizontal toolbar.
That's why I propose the change in this module.

Remaining tasks

User interface changes

Make the secondary toolbar sticky (with a Save button) and visible on Layout Builder page with a horizontal toolbar.

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

1.0

Component

User interface

Created by

🇷🇺Russia lexbritvin

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

Comments & Activities

Production build 0.69.0 2024