Problem/Motivation
When the document direction is RTL, Gin's vertical toolbar tray is positioned on the right side of the viewport. However, initDisplace() in js/toolbar.js always sets data-offset-left regardless of direction:
if (toolbarVariant === 'vertical') { toolbar.setAttribute('data-offset-left', ''); }
This causes Drupal.displace to measure the wrong physical edge, resulting in --drupal-displace-offset-right being 0 while the tray is open and displacing from the right. Any element that consumes the right offset to avoid the toolbar will overlap it.
Drupal core's own ToolbarVisualView.js already handles this correctly:
const dir = document.documentElement.dir; const edge = dir === 'rtl' ? 'right' : 'left'; $trays.filter('.toolbar-tray-vertical.is-active').attr(`data-offset-${edge}`, '');
Steps to reproduce
- Install Drupal with the Gin admin theme and Gin Toolbar enabled.
- Set the admin interface to an RTL language (e.g. Arabic or Hebrew).
- Open the admin UI with the vertical tray active.
- Inspect
--drupal-displace-offset-rightin DevTools, it will be0while the tray is open. And--drupal-displace-offset-leftis calculated from the left. - Any fixed element consuming
--drupal-displace-offset-rightorDrupal.displace.offsets.rightwill overlap the toolbar.
Proposed resolution
In initDisplace() in js/toolbar.js, apply the same RTL guard that Drupal core uses:
initDisplace: () => { const toolbar = document.querySelector('#gin-toolbar-bar .toolbar-menu-administration'); if (toolbar) { if (toolbarVariant === 'vertical') { const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left'; toolbar.setAttribute(`data-offset-${edge}`, ''); } else { toolbar.setAttribute('data-offset-top', ''); } } },
Remaining tasks
- Apply patch to
js/toolbar.js - Rebuild
dist/js/toolbar.js - Test in an RTL language with vertical tray open and closed
User interface changes
No visual change in LTR. In RTL, fixed elements that consume displace offsets will now correctly avoid the vertical toolbar tray.
API changes
None.
Data model changes
None.
Issue fork gin-3589964
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:
Comments
Comment #2
layalkComment #4
layalk