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

  1. Install Drupal with the Gin admin theme and Gin Toolbar enabled.
  2. Set the admin interface to an RTL language (e.g. Arabic or Hebrew).
  3. Open the admin UI with the vertical tray active.
  4. Inspect --drupal-displace-offset-right in DevTools, it will be 0 while the tray is open. And --drupal-displace-offset-left is calculated from the left.
  5. Any fixed element consuming --drupal-displace-offset-right or Drupal.displace.offsets.right will 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

Command icon 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

layalk created an issue. See original summary.

layalk’s picture

Version: 6.x-dev » 5.0.x-dev

layalk’s picture

Status: Active » Needs review