Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Current toolbar can be large with a lot of enabled islands, the end part an be very long, as well as start part in some cases.
Note: we don't want a phone support, but at least a proper 1024 when there is a lot of islands enabled.
Proposed resolution
We should have a more responsive version:
Switch start button group to a dropdown.
Switch end islands buttons or dropdown in a main end dropdown.
Icons and text to define.
From my perspective this should be done mostly with js/css, but we probably need a build to have the dropdown container component.
Note: there is already a small script to reduce the size of buttons, it's a starting point: components/toolbar/toolbar.js
| Comment | File | Size | Author |
|---|
Issue fork display_builder-3544782
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
pdureau commentedAnother proposal would be to show only icon in smaller screen.
All island have icons, but they are not always visible:
Instead of deciding that on server side rendering, let's always render the icons (feedback from Jean: and also label, so we improve accessibility), but let's hide them on browser rendering following the same rules.
So, at smallest viewport width, we can hide all labels, show all icons.
Comment #3
pdureau commentedComment #4
debdeep.mukhopadhyay commented@pdureau
I tested this issue on a 1024px resolution using the latest patch. The layout and toolbar positioning now appear correct and stable. I didn't notice any visual breaking, overlap, or alignment issues.
Comment #5
mogtofu33 commentedComment #6
pdureau commentedHi debdeep,
Thanks for your contribution. Your patch is doing neither of the 2 proposals:
But your little change may be welcomed. It will be evaluated during beta2 phase.
Comment #7
sujal kshatri commented.
Comment #9
debdeep.mukhopadhyay commentedThank you @pdureau for the guidance.
I’ve implemented the suggestions from your last comment and refined both the CSS and JavaScript accordingly. The toolbar now behaves correctly across all states:
Normal (non-fullscreen) view uses the 3-dot dropdown without layout breakage
Fullscreen desktop shows all tools inline
Fullscreen at smaller widths collapses start/end tools into vertical dropdowns
Native elements (including the Fluid viewport select) are preserved and function correctly
Responsive behavior is now scoped only when html has no-touchevents js display-builder-is-fullscreen.
Please let me know if you’d like this shared as a patch or if further adjustments are needed.
Thanks again for your help.
Comment #10
pdureau commentedComment #11
pdureau commentedHi debdeep, Thanks a lot for your contribution. Sorry for the late review but we were focused on completing beta3.
I have rebased your branch and fixed (not all) some eslint fails.
It seems you addressed Jean's proposal: "Switch button groups to dropdowns", so he will be the authority here for final review. But I believe the behavior implemented for fullscreen mode (normal button for wider viewports, dropdown for smaller viewoorts):
Don't jump on the update right away anyway. I believe it is worth discussing the 2 proposals ("Switch button groups to dropdowns" and "how only icon in smaller screen") before working on them or on one of them. We may wrap beta4 soon, that's why i postpone to beta5.