ESHOPMAN Admin Dashboard: Unlocking True RTL Support for Global Merchants

Enhancing ESHOPMAN Admin for Global Reach: Addressing Right-to-Left Layout Challenges

At Move My Store, we're committed to keeping you informed about the latest developments and best practices within the ESHOPMAN ecosystem. A recent community discussion highlighted a crucial aspect of internationalization for the ESHOPMAN Admin Dashboard: ensuring a seamless experience for users operating in Right-to-Left (RTL) languages.

The ESHOPMAN platform, designed as a powerful headless commerce solution integrated with HubSpot, aims to provide a robust and intuitive experience for merchants worldwide. However, a specific bug was identified concerning the display of the Admin Dashboard when configured for RTL languages such as Arabic, Hebrew, or Persian.

The Challenge: LTR Layout Persisting in RTL Mode

When an ESHOPMAN Admin user selects an RTL language in their profile settings, the document correctly applies the dir="rtl" attribute. Despite this, many critical sections of the dashboard, including navigation menus, order management pages, product listings, price lists, and various UI cards, continue to display a Left-to-Right (LTR) layout. This inconsistency leads to incorrect spacing, misaligned elements, and improperly oriented directional icons (like arrows and chevrons), significantly impacting usability for RTL language speakers.

The root cause was traced to the dashboard's internal markup. While ESHOPMAN leverages modern web technologies like Node.js/TypeScript and Tailwind CSS for its UI, many of the CSS classes used for layout (e.g., ml- for margin-left, pr- for padding-right, left- for absolute positioning, text-left for text alignment, border-r for right border) are physical properties. These physical properties dictate direction based on the screen's left/right, rather than adapting to the document's reading direction (logical properties like ms- for margin-start, pe- for padding-end, start- for positioning, text-start for text alignment, border-e for end border).

Proposed Solution: A Comprehensive Refactoring for True RTL Mirroring

The ESHOPMAN team has acknowledged this as a high-priority bug and has outlined a detailed plan for resolution. The fix involves a significant refactoring effort across approximately 78-100 files within the ESHOPMAN Admin Dashboard codebase. The proposed solution includes three key components:

• Codemod Sweep: An automated tool (a 'codemod') will be utilized to systematically replace all instances of physical Tailwind CSS classes with their logical, RTL-aware equivalents. This ensures that elements adapt their positioning and spacing based on the reading direction.
• Manual Adjustments: While the codemod will handle the bulk of the changes, specific directional icons and other unique UI elements may require manual intervention to ensure they correctly mirror in RTL layouts.
• RTL Linting Guard: To prevent future regressions and maintain consistency, a new linting rule will be implemented. This guard will enforce the use of logical directional properties throughout the dashboard's markup, ensuring that all new or modified code adheres to RTL best practices.

This initiative is part of a broader commitment to enhance internationalization across the entire ESHOPMAN platform, including its core UI components. The successful implementation of this fix will ensure that the ESHOPMAN Admin Dashboard provides a fully mirrored, intuitive, and consistent user experience for merchants and developers working in RTL languages, further strengthening ESHOPMAN's position as a truly global headless commerce solution.

Stay tuned to Move My Store for more updates on ESHOPMAN's continuous evolution and how these enhancements empower your e-commerce operations on HubSpot CMS.