fix(ui): incorrect padding when using rtl (#13338)

Fixes inconsistent padding in the doc view for RTL viewing.

### ❌ Before

#### Desktop
<img width="1331" height="310" alt="CleanShot 2025-07-30 at 16 37 30"
src="https://github.com/user-attachments/assets/48d3e127-09dd-4356-99ae-16fe47817937"
/>

#### Mobile
<img width="619" height="328" alt="CleanShot 2025-07-30 at 16 37 52"
src="https://github.com/user-attachments/assets/36169ca5-c1a2-4175-a6e1-f0a4784d5e9e"
/>


### ✅ After

#### Desktop
<img width="1675" height="291" alt="CleanShot 2025-07-30 at 16 39 18"
src="https://github.com/user-attachments/assets/1da78a8a-b236-4f95-9eb2-8b5055b676ae"
/>

#### Mobile
<img width="531" height="309" alt="CleanShot 2025-07-30 at 16 39 30"
src="https://github.com/user-attachments/assets/af858bfc-6d75-4139-ada1-4f8100744bfb"
/>

Author: JarrodMFlesch

packages/ui/src/elements/DocumentControls/index.scss

@@ -187,6 +187,12 @@
         }
       }
 
+      &__popup {
+        [dir='rtl'] & {
+          padding-left: var(--gutter-h);
+        }
+      }
+
       &__meta {
         width: auto;
         gap: calc(var(--base) / 2);
@@ -216,7 +222,9 @@
       }
 
       &__controls {
-        padding-left: var(--gutter-h);
+        [dir='ltr'] & {
+          padding-left: var(--gutter-h);
+        }
         overflow: auto;
 
         // do not show scrollbar because the parent container has a static height

packages/ui/src/elements/DocumentFields/index.scss

@@ -5,6 +5,24 @@
     width: 100%;
     display: flex;
     --doc-sidebar-width: 325px;
+    --sidebar-gutter-h-right: var(--gutter-h);
+    --sidebar-gutter-h-left: calc(var(--base) * 2);
+    --main-gutter-h-left: var(--gutter-h);
+    --main-gutter-h-right: calc(var(--base) * 2);
+
+    [dir='rtl'] &:not(&--force-sidebar-wrap) {
+      --sidebar-gutter-h-left: var(--gutter-h);
+      --sidebar-gutter-h-right: calc(var(--base) * 2);
+      --main-gutter-h-left: calc(var(--base) * 2);
+      --main-gutter-h-right: var(--gutter-h);
+    }
+
+    &--force-sidebar-wrap {
+      --sidebar-gutter-h-left: var(--gutter-h);
+      --sidebar-gutter-h-right: var(--gutter-h);
+      --main-gutter-h-left: var(--gutter-h);
+      --main-gutter-h-right: var(--gutter-h);
+    }
 
     &--has-sidebar {
       .document-fields {
@@ -13,18 +31,18 @@
         }
 
         &__edit {
+          padding-left: var(--main-gutter-h-left);
+          padding-right: var(--main-gutter-h-right);
           [dir='ltr'] & {
             top: 0;
             right: 0;
             border-right: 1px solid var(--theme-elevation-100);
-            padding-right: calc(var(--base) * 2);
           }
 
           [dir='rtl'] & {
             top: 0;
             left: 0;
             border-left: 1px solid var(--theme-elevation-100);
-            padding-left: calc(var(--base) * 2);
           }
         }
 
@@ -74,8 +92,8 @@
       flex-direction: column;
       gap: var(--base);
       padding-top: calc(var(--base) * 1.5);
-      padding-left: calc(var(--base) * 2);
-      padding-right: var(--gutter-h);
+      padding-left: var(--sidebar-gutter-h-left);
+      padding-right: var(--sidebar-gutter-h-right);
       padding-bottom: var(--spacing-view-bottom);
     }
 
@@ -106,14 +124,23 @@
 
         &__sidebar-fields {
           padding-top: 0;
-          padding-left: var(--gutter-h);
           padding-bottom: 0;
         }
       }
     }
 
     @include mid-break {
       display: block;
+      [dir='rtl'] &:not(&--force-sidebar-wrap) {
+        --sidebar-gutter-h-left: var(--gutter-h);
+        --sidebar-gutter-h-right: var(--gutter-h);
+        --main-gutter-h-left: var(--gutter-h);
+        --main-gutter-h-right: var(--gutter-h);
+      }
+      --main-gutter-h-left: var(--gutter-h);
+      --main-gutter-h-right: var(--gutter-h);
+      --sidebar-gutter-h-left: var(--gutter-h);
+      --sidebar-gutter-h-right: var(--gutter-h);
 
       &--has-sidebar {
         .document-fields {
@@ -124,12 +151,10 @@
           &__edit {
             [dir='ltr'] & {
               border-right: 0;
-              padding-right: var(--gutter-h);
             }
 
             [dir='rtl'] & {
               border-left: 0;
-              padding-left: var(--gutter-h);
             }
           }
 
@@ -160,18 +185,8 @@
 
       &__sidebar-fields {
         padding-top: 0;
-        padding-left: var(--gutter-h);
-        padding-right: var(--gutter-h);
         padding-bottom: 0;
         gap: base(0.5);
-
-        [dir='ltr'] & {
-          padding-right: var(--gutter-h);
-        }
-
-        [dir='rtl'] & {
-          padding-left: var(--gutter-h);
-        }
       }
 
       &__sidebar {