From cca4c4945501f8285209e2dddbe93f7aad0a2d11 Mon Sep 17 00:00:00 2001
From: Alexander Yastrebov <yastrebov.alex@gmail.com>
Date: Mon, 23 Mar 2026 01:35:39 +0100
Subject: [PATCH] Fix model speed/accuracy indicator alignment (#1116)

* increase indicator width to fit German translation
* use text-end for proper alignment of Arabic translation
* use ms-4 instead of ml-4 to fix score bar alignment for Arabic
* use ms-auto to fix download button alignment for Arabic

Fixes #1109
---
 src/components/onboarding/ModelCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/onboarding/ModelCard.tsx b/src/components/onboarding/ModelCard.tsx
index 2efed38..d1158df 100644
--- a/src/components/onboarding/ModelCard.tsx
+++ b/src/components/onboarding/ModelCard.tsx
@@ -162,10 +162,10 @@ const ModelCard: React.FC<ModelCardProps> = ({
           </p>
         </div>
         {(model.accuracy_score > 0 || model.speed_score > 0) && (
-          <div className="hidden sm:flex items-center ml-4">
+          <div className="hidden sm:flex items-center ms-4">
             <div className="space-y-1">
               <div className="flex items-center gap-2">
-                <p className="text-xs text-text/60 w-14 text-right">
+                <p className="text-xs text-text/60 w-24 text-end">
                   {t("onboarding.modelCard.accuracy")}
                 </p>
                 <div className="w-16 h-1.5 bg-mid-gray/20 rounded-full overflow-hidden">
@@ -176,7 +176,7 @@ const ModelCard: React.FC<ModelCardProps> = ({
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <p className="text-xs text-text/60 w-14 text-right">
+                <p className="text-xs text-text/60 w-24 text-end">
                   {t("onboarding.modelCard.speed")}
                 </p>
                 <div className="w-16 h-1.5 bg-mid-gray/20 rounded-full overflow-hidden">
@@ -218,7 +218,7 @@ const ModelCard: React.FC<ModelCardProps> = ({
           </div>
         )}
         {status === "downloadable" && (
-          <span className="flex items-center gap-1.5 ml-auto text-xs text-text/50">
+          <span className="flex items-center gap-1.5 ms-auto text-xs text-text/50">
             <Download className="w-3.5 h-3.5" />
             <span>{formatModelSize(Number(model.size_mb))}</span>
           </span>
@@ -229,7 +229,7 @@ const ModelCard: React.FC<ModelCardProps> = ({
             size="sm"
             onClick={handleDelete}
             title={t("modelSelector.deleteModel", { modelName: displayName })}
-            className="flex items-center gap-1.5 ml-auto text-logo-primary/85 hover:text-logo-primary hover:bg-logo-primary/10"
+            className="flex items-center gap-1.5 ms-auto text-logo-primary/85 hover:text-logo-primary hover:bg-logo-primary/10"
           >
             <Trash2 className="w-3.5 h-3.5" />
             <span>{t("common.delete")}</span>