Modal dialog position in RTL
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3348933. -->
Reported by: [yoa](https://www.drupal.org/user/3639771)
Related to !238
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>In the newest release RC2: Modal dialog in RTL is sticking to the right side of the screen.</p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<p>Clean installation of Drupal 10 with Gin.<br>
Install Language and set any RTL language as default.<br>
Open a modal.</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>The issue is with <a href="https://git.drupalcode.org/project/gin/-/blob/8.x-3.0-rc2/styles/components/dialog.scss">this css</a></p>
<pre> .ui-dialog {<br> position: absolute;<br> left: 0;<br> top: 0;<br> font-family: var(--gin-font);<br> outline: none;</pre><p>
After compiling with postcssRTLCSS we are getting</p>
<pre> [dir="rtl"] .ui-dialog {<br> right: 0;<br> }</pre><p>
while <a href="https://git.drupalcode.org/project/drupal/-/blob/10.0.5/core/misc/dialog/dialog.position.js">Core's dialog.position.js</a> is adding position value to the <code>left</code> property.</p>
<p>In LTR the modal's style overrides the css and the modal is centered, but in RTL the <code>right: 0</code> property is problematic with the <code>left: x</code> style property.</p>
<p>I am not really how to solve it.<br>
This initial value seems to also affect to JS calculation (we get <code>left: 0</code>), So I think that even if you do something like this</p>
<pre>[dir="rtl"] .ui-dialog:not([style]) {<br> right: 0;<br>}</pre><p>
It would result in <code>left: 0</code>.</p>
<p>Why does gin to set it to 0? just as an inital settings until JS runs? </p>
<p>Perhaps it's a core issue? Because <code>left</code> should be <code>right</code> in RTL.</p>
<p>In anycase quick-fix for anyone is struggling with this until this issue is solved, you can just add this to your css.</p>
<pre>[dir="rtl"] .ui-dialog {<br> right: unset;<br>}</pre>
issue