>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3482116. --> Reported by: [heyyo](https://www.drupal.org/user/474388) Related to !520 >>> <p>Since logical CSS awesome change, offcanvas dialog is opening on wrong side in RTL page.</p> <p>To fix an old <a href="https://api.jqueryui.com/position/">JQuery UI issue</a> with dialog position, it was requested to add this CSS for the ui-dialog html element.</p> <pre>.ui-dialog {<br>&nbsp; position: absolute;<br>&nbsp; top: 0;<br>&nbsp; left: 0;<br>}</pre><p>Before logical CSS, gin had a <a href="https://git.drupalcode.org/project/gin/-/blob/abce0b5f50b8ba0af71f75970234eb89af6eb546/styles/components/dialog.scss#L47">postcss rtl exception</a> to apply the `left: 0` only in LTR</p> <p>But now with logical CSS, and the new postcss plugin <strong>postcss-rtl-logical-properties</strong>, this exception is not applied anymore. so `left: 0` became `inset-inline-start: 0` so it is applied for LTR and RTL.</p> <p>For LTR `left: 0` is the same than `inset-inline-start: 0`<br> but for RTL it's becoming `right: 0`, that's explain why the offcanvas is on the wrong side (right instead of left) </p> <p>If I understand correctly this JQuery UI bug, was introduced to fix the case, when the dialog was using `position: fixed`, but it looks this bug was resolved.</p> <p>I tested the removal of this part, and offcanvas was working in LTR and RTL.<br> I also checked regular dialog (not offcanvas) the one provided by paragraph with modal form option, it's also working.</p> <p>PS: this CSS fix is still in <a href="https://git.drupalcode.org/project/drupal/-/blob/11.x/core/assets/vendor/jquery.ui/themes/base/dialog.css?ref_type=heads#L14">JQUERY UI dialog css</a>, but for some reason drupal core is <a href="https://git.drupalcode.org/project/drupal/-/blob/10.3.x/core/themes/claro/claro.info.yml?ref_type=heads#L70">not loading this css in claro admin theme</a>, but adding it again in its <a href="https://git.drupalcode.org/project/drupal/-/blob/10.3.x/core/themes/claro/css/components/dialog.css?ref_type=heads#L16">own css</a>.</p>