From 25d6e9693d4ced614b90581eb8f8940a5c42d5f0 Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Wed, 10 Sep 2025 01:17:18 +0300
Subject: [PATCH] Enhance RTL support in _layer.scss (#1365)

Added alignment to item handle and adjusted SVG margins for RTL support,
and fix menu.

## Launch Checklist

Before:
<img width="610" height="465" alt="image"
src="https://github.com/user-attachments/assets/8931d5af-e545-4b37-b764-ca660b182c27"
/>
After:
<img width="610" height="465" alt="image"
src="https://github.com/user-attachments/assets/07d865c0-bd1b-4fd6-bd4f-cd3a8c17126a"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
---
 src/styles/_layer.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 21d14f25..b24afba4 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -41,12 +41,19 @@
     flex: 1;
     display: flex;
     cursor: grab;
-
+    align-items: center;
     svg {
       margin-right: 4px;
     }
   }
 
+  [dir="rtl"] &-item-handle {
+    svg {
+      margin-right: 0;
+      margin-left: 4px;
+    }
+  }
+
   &-item {
     border: solid 1px transparent;
     font-weight: 400;
@@ -288,6 +295,11 @@
     min-width: 120px;
   }
 
+  [dir="rtl"] &__menu {
+    left: 0;
+    right: auto;
+  }
+
   &__button__svg {
     width: 24px;
     height: 24px;