Claro: Select list chevron-down icon is showing on wrong position in RTL dir in views

I have tested above patch on version 10.1.0 and chevron down icon is showing as expected on left side on RTL dir.

I have checked in desktop and mobile view and attached screenshot as well.

1. +++ b/core/themes/claro/css/components/views-ui.css
   @@ -110,6 +110,19 @@ details.fieldset-no-legend {
   +  padding-right: calc(1rem - var(--input-border-size));
   +  padding-left: calc(2rem - var(--input-border-size));
   

   It should be possible to eliminate the rtl specific padding by converting the default padding to use padding-inline-start/end which accounts for ltr/rtl automatically.

2. +++ b/core/themes/claro/css/components/views-ui.css
   @@ -110,6 +110,19 @@ details.fieldset-no-legend {
   +  background-position: 0 50%;
   

   The existing .views-ui-dialog .form-element--type-select style that is making this patch necessary only needs to style the y axis, but the fact that it is styling the x axis as well is what is causing this problem in the first place

   change the background styling for the views select to change background position y and you inherit the working RTL x position from .form-element--type-select

   .views-ui-dialog .form-element--type-select {
   
       background-position-y: 56%;
   }

   In other words you get the same result as all this additional CSS by changing a background-position: 0% 56%; to background-position-y: 56%;

   And changing one or two lines sure beats adding nine of them 🙂!

3. +++ b/core/themes/claro/css/components/views-ui.pcss.css
   @@ -93,6 +93,15 @@ details.fieldset-no-legend {
   +    padding-left: var(--input-padding-horizontal);
   

   While the chevron is closer to the element edge when in forced colors mode, adjusting the padding shouldn't make a difference as it switches to using the native chevron in forced-colors which does not acknowledge padding. This is default behavior for select elements outside of views as well so doesn't need to be addressed in this issue scope regardless

Applied and tested patch #5 on Drupal 10.1.x-dev
The patch applied cleanly
The issue gets resolved after applying the patch. Now, the select list chevron-down icon is displaying on the correct position in RTL dir in views.
Refer to the screenshots in #3

+++ b/core/themes/claro/css/components/views-ui.pcss.css
@@ -90,8 +90,9 @@ details.fieldset-no-legend {
+  padding-inline-start: calc(1rem - var(--input-border-size));

What need does adding this start padding address? It seems like the right padding (now inline-end) is all that is needed. Perhaps I'm missing something?

Looks good @Gauravvv. No additional lines of code, changing the background position to just the dimension that needs it, and changing the padding to a logical RTL-friendly style seems to take care of it.

Committed 59ffbd8 and pushed to 10.1.x and cherry-picked to 10.0.x. Also backported to 9.5.x by running yarn build:css locally. Thanks!