ui: Make BreakdownBars respect page direction (RTL/LTR)

[O2sa]

The BreakdownBars component currently does not fully adapt to the page's RTL/LTR direction. Since dir is already available from useTranslation(), it should be applied to the layout to ensure progress bars and labels align correctly based on the current language.

Tasks

• Open components/breakdown-bars.tsx.
• Add the dir={dir} attribute to the appropriate container elements (or apply the necessary Tailwind CSS logical properties) so that the layout flips correctly for RTL languages.

Note

CONTRIBUTIONS ARE WELCOME!
If you want to get this issue assigned to you. Just comment 'assign me'. You will be assigned to the issue instantly via GitHub-actions bot.

[snakefood3232]

I see the BreakdownBars component needs to respect the page direction (RTL/LTR) using the dir value from useTranslation(). I'd handle this by adding dir={dir} to key container elements and applying Tailwind CSS logical properties to ensure proper layout alignment for RTL languages. I can have a PR up within 24 hours. I've previously implemented RTL compatibility in React projects, ensuring seamless localization adaptations.

[snakefood3232]

The BreakdownBars component needs to adapt to RTL/LTR. I'd handle this by applying dir={dir} to the main container and using Tailwind's logical properties to ensure correct alignment. I can have a PR ready within 24 hours. I've worked with RTL layouts in multiple projects using React and Tailwind.