fix(app): correct RTL layout interactions (#40410)

packages/ui/src/v2/components/file-tree-v2.css

@@ -13,13 +13,13 @@
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
-  padding-right: 8px;
+  padding-inline-end: 8px;
   overflow: visible;
   border: none;
   border-radius: 6px;
   background-color: transparent;
   color: var(--v2-text-text-muted);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   scroll-margin-block: 8px;
   transition:
@@ -87,6 +87,10 @@
   transform: rotate(-90deg);
 }
 
+[data-component="file-tree-v2"]:dir(rtl) [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
+  transform: rotate(90deg);
+}
+
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
   color: var(--v2-text-text-base);
 }

packages/ui/src/v2/components/select-v2.css

@@ -52,7 +52,8 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: 0 6px 0 0;
+  padding-block: 0;
+  padding-inline: 0 6px;
   gap: 8px;
   width: 280px;
   height: 28px;
@@ -74,7 +75,8 @@
 
 [data-component="select-v2"][data-appearance="large"] {
   height: 32px;
-  padding: 0 8px 0 0;
+  padding-block: 0;
+  padding-inline: 0 8px;
 }
 
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
@@ -126,12 +128,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 0 0 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 0;
   margin: 0;
   border: 0;
   background: transparent;
   outline: none;
-  text-align: left;
+  text-align: start;
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
@@ -188,7 +191,8 @@
   width: fit-content;
   max-width: 100%;
   height: 24px;
-  padding: 4px 4px 4px 8px;
+  padding-block: 4px;
+  padding-inline: 8px 4px;
   gap: 4px;
   border-radius: 4px;
   background: transparent;
@@ -278,6 +282,13 @@
   color: var(--menu-v2-accent);
 }
 
+[data-slot="select-v2-listbox"]
+  [data-component="menu-v2-item"][data-selected]
+  [data-slot="menu-v2-item-indicator"]
+  svg {
+  visibility: visible;
+}
+
 [data-slot="select-v2-listbox"]
   [data-component="menu-v2-item"]:not([data-selected])
   [data-slot="menu-v2-item-indicator"]

packages/ui/src/v2/components/switch-v2.css

@@ -121,6 +121,10 @@
       var(--v2-grey-300);
   }
 
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(-8px);
+  }
+
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
     background:
       linear-gradient(
@@ -135,6 +139,10 @@
     transform: translateX(7px);
   }
 
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-7px);
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
   }

packages/ui/src/v2/components/text-input-v2.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: 0 8px 0 0;
+  padding-block: 0;
+  padding-inline: 0 8px;
   gap: 8px;
   width: 280px;
   height: 28px;
@@ -64,7 +65,7 @@
   flex: none;
   align-items: center;
   justify-content: center;
-  padding-left: 8px;
+  padding-inline-start: 8px;
   color: var(--v2-icon-icon-muted);
 }
 
@@ -74,7 +75,7 @@
 }
 
 [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
@@ -82,7 +83,8 @@
   width: 100%;
   min-width: 0;
   height: 100%;
-  padding: 0 0 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 0;
   margin: 0;
   border: 0;
   background: transparent;
@@ -165,7 +167,7 @@
   height: 28px;
   padding: 0;
   border-radius: 6px;
-  margin-right: -8px;
+  margin-inline-end: -8px;
 }
 
 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {