Vertical tray sets data-offset-left in RTL instead of data-offset-right, causing incorrect viewport displacement
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3589964. -->
Reported by: [layalk](https://www.drupal.org/user/502970)
Related to !786
>>>
<h3>Problem/Motivation</h3>
<p>When the document direction is RTL, Gin's vertical toolbar tray is positioned on the right side of the viewport. However, <code>initDisplace()</code> in <code>js/toolbar.js</code> always sets <code>data-offset-left</code> regardless of direction:</p>
<pre><pre>if (toolbarVariant === 'vertical') {<br> toolbar.setAttribute('data-offset-left', '');<br>}</pre></pre><p>This causes <code>Drupal.displace</code> to measure the wrong physical edge, resulting in <code>--drupal-displace-offset-right</code> being <code>0</code> while the tray is open and displacing from the right. Any element that consumes the right offset to avoid the toolbar will overlap it.</p>
<p>Drupal core's own <code>ToolbarVisualView.js</code> already handles this correctly:</p>
<pre><pre>const dir = document.documentElement.dir;<br>const edge = dir === 'rtl' ? 'right' : 'left';<br>$trays.filter('.toolbar-tray-vertical.is-active').attr(`data-offset-${edge}`, '');</pre></pre><h3>Steps to reproduce</h3>
<ol>
<li>Install Drupal with the Gin admin theme and Gin Toolbar enabled.</li>
<li>Set the admin interface to an RTL language (e.g. Arabic or Hebrew).</li>
<li>Open the admin UI with the vertical tray active.</li>
<li>Inspect <code>--drupal-displace-offset-right</code> in DevTools, it will be <code>0</code> while the tray is open. And <code>--drupal-displace-offset-left</code> is calculated from the left. </li>
<li>Any fixed element consuming <code>--drupal-displace-offset-right</code> or <code>Drupal.displace.offsets.right</code> will overlap the toolbar.</li>
</ol>
<h3>Proposed resolution</h3>
<p>In <code>initDisplace()</code> in <code>js/toolbar.js</code>, apply the same RTL guard that Drupal core uses:</p>
<pre><pre>initDisplace: () => {<br> const toolbar = document.querySelector('#gin-toolbar-bar .toolbar-menu-administration');<br><br> if (toolbar) {<br> if (toolbarVariant === 'vertical') {<br> const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';<br> toolbar.setAttribute(`data-offset-${edge}`, '');<br> } else {<br> toolbar.setAttribute('data-offset-top', '');<br> }<br> }<br>},</pre></pre><h3>Remaining tasks</h3>
<ul>
<li>Apply patch to <code>js/toolbar.js</code></li>
<li>Rebuild <code>dist/js/toolbar.js</code></li>
<li>Test in an RTL language with vertical tray open and closed</li>
</ul>
<h3>User interface changes</h3>
<p>No visual change in LTR. In RTL, fixed elements that consume displace offsets will now correctly avoid the vertical toolbar tray.</p>
<h3>API changes</h3>
<p>None.</p>
<h3>Data model changes</h3>
<p>None.</p>
issue