[Bug]: <td> elements in data table are stacking on top of each other in RTL languages. #14489
Description
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:
