[Bug]: <td> elements in data table are stacking on top of each other in RTL languages.

[amir-konimbo]

Package.json file

{
  "name": "issues-medusa-backend-repo",
  "version": "0.0.1",
  "description": "A starter for Medusa projects.",
  "author": "Medusa (https://medusajs.com)",
  "license": "MIT",
  "keywords": [
    "sqlite",
    "postgres",
    "typescript",
    "ecommerce",
    "headless",
    "medusa"
  ],
  "scripts": {
    "build": "medusa build",
    "seed": "medusa exec ./src/scripts/seed.ts",
    "start": "medusa start",
    "dev": "medusa develop",
    "test:integration:http": "TEST_TYPE=integration:http NODE_OPTIONS=--experimental-vm-modules jest --silent=false --runInBand --forceExit",
    "test:integration:modules": "TEST_TYPE=integration:modules NODE_OPTIONS=--experimental-vm-modules jest --silent=false --runInBand --forceExit",
    "test:unit": "TEST_TYPE=unit NODE_OPTIONS=--experimental-vm-modules jest --silent --runInBand --forceExit"
  },
  "dependencies": {
    "@medusajs/admin-sdk": "2.12.4",
    "@medusajs/cli": "2.12.4",
    "@medusajs/framework": "2.12.4",
    "@medusajs/medusa": "2.12.4"
  },
  "devDependencies": {
    "@medusajs/test-utils": "2.12.4",
    "@swc/core": "^1.7.28",
    "@swc/jest": "^0.2.36",
    "@types/jest": "^29.5.13",
    "@types/node": "^20.12.11",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.2.25",
    "jest": "^29.7.0",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2",
    "vite": "^5.4.14",
    "yalc": "^1.0.0-pre.53"
  },
  "engines": {
    "node": ">=20"
  }
}

Node.js version

v22.16.0

Database and its version

PostgreSQL 15.13

Operating system name and version

Mac 15.5 (24F74)

Browser name

chrome

What happended?

When changing the admin dashboard language into an RTL language (like Hebrew),
then going into Settings -> Locations & Shipping -> choosing any from the table -> Edit Fulfillment Providers:
The tags in the table rows will stack one on top of the other and will hide the checkbox (image for reference)

there is an attribute on the of "left-[68px]" that if its being changed to "start-[68px]" it fixes the UI bug.

Expected behavior

Exactly like in LTR languages where you can see the checkboxes near every provider (image for reference)

Actual behavior

When its an RTL language you can't see the checkboxes:

Link to reproduction repo

https://github.com/amir-konimbo/issues-medusa-backend-repo

[iharshyadav]

Hey, I would be happy to contribute on this, please assign it to me.