From fe0c3d71130f9dacf538d47bf084396c0ff65b49 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 20 Oct 2025 15:18:34 +0200
Subject: [PATCH] fix: update margin and padding properties to use logical
 properties for rtl support

---
 .../pluggableWidgets/combobox-web/CHANGELOG.md   |  4 ++++
 .../combobox-web/src/ui/Combobox.scss            | 16 ++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
index 1c8d66e6aa..7579b28aaf 100644
--- a/packages/pluggableWidgets/combobox-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where right-to-left text orientation would cause layout and spacing issues.
+
 ## [2.6.1] - 2025-10-08
 
 ### Fixed
diff --git a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss
index a4be05a850..dffe8d97d6 100644
--- a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss
+++ b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss
@@ -120,7 +120,7 @@ $cb-skeleton-dark: #d2d2d2;
             background-color: var(--color-default-light, $cb-highlighted-index);
         }
         & > .widget-combobox-icon-container {
-            margin-right: var(--dropdown-outer-padding, $cb-menu-outer-padding);
+            margin-inline-end: var(--dropdown-outer-padding, $cb-menu-outer-padding);
         }
 
         .widget-combobox-caption-text {
@@ -205,7 +205,7 @@ $cb-skeleton-dark: #d2d2d2;
         }
 
         & + .widget-combobox-down-arrow {
-            border-left: 1px solid var(--gray, $cb-separator-border);
+            border-inline-start: 1px solid var(--gray, $cb-separator-border);
         }
     }
     &-down-arrow {
@@ -213,7 +213,7 @@ $cb-skeleton-dark: #d2d2d2;
         flex-wrap: wrap;
         align-content: center;
         cursor: pointer;
-        padding-left: var(--spacing-smaller, $cb-spacing);
+        padding-inline-start: var(--spacing-smaller, $cb-spacing);
 
         &-icon {
             transition: transform 0.2s;
@@ -234,8 +234,8 @@ $cb-skeleton-dark: #d2d2d2;
         &-text {
             color: var(--cb-text-color, var(--gray-darker, $cb-typography-color));
             position: absolute;
-            left: 0;
-            right: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             top: 0;
             bottom: 0;
             text-overflow: ellipsis;
@@ -265,8 +265,8 @@ $cb-skeleton-dark: #d2d2d2;
             &:placeholder-shown {
                 position: absolute;
                 top: 0;
-                left: 0;
-                right: 0;
+                inset-inline-start: 0;
+                inset-inline-end: 0;
                 bottom: 0;
             }
             &:focus:not(:placeholder-shown) + .widget-combobox-placeholder-custom {
@@ -385,7 +385,7 @@ $cb-skeleton-dark: #d2d2d2;
             width: 148px;
 
             &-small {
-                margin-right: 8px;
+                margin-inline-end: 8px;
                 width: 16px;
             }
         }