Claro: Text overlaps the icon in select list on rtl

I have provided the patch for RTL dir, Please review

Verified and tested patch #2 on 10.1.x-dev. Patch applied successfully.

Test Steps:
1. Add an RTL language
2. Goto /admin/content page
3. Select "Remove content from front page" option
4. Verify icon overlaps
5. Apply patch #2 and check issue is resolved or not

Test Result: Issue is not resolved after applying patch due to padding added. Option text stills overlaps the icon in RTL.

Before Patch:

After Patch:

Expected:

Moving to Needs Work.

I think you need to clear your cache, In your second screenshot, I can't see the code from patch

[dir="rtl"] .views-bulk-actions__item .form-element--type-select {
  padding: calc(0.5rem - 1px) calc(1rem - 1px) calc(0.5rem - 1px) calc(2.25rem - 1px);
}

Please see

Thanks @Gauravv. I had cleared the drupal cache, however I think it was still cached.

Re-tested with new drupal 10.1.x-dev installation. And patch #2 resolves the issue.
Attaching only after patch screenshot as before patch screenshot is added in #3.

After patch:

We have been removing rtl in the claro refactoring tickets. Should we avoid adding a new instance here?

Could be wrong.

The refactor issue for tableselect has been marked as closed, allowing us to focus on addressing it within this specific issue. I have included the parent issue for reference.

I have re-rolled the patch as patch #2 is not applying anymore.

Confirmed the issue by installing Arabic language.
Patch #8 resolves the issue

Committed 5cc9e95 and pushed to 11.x. Also cherry-picked to 10.1.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.