fix(usage-slider): rtl optimize ui

Author: x0sina

dashboard/src/components/users/usage-slider-compact.tsx

@@ -3,6 +3,7 @@ import { cn } from '@/lib/utils'
 import { formatBytes } from '@/utils/formatByte'
 import { useTranslation } from 'react-i18next'
 import { Progress } from '@/components/ui/progress'
+import useDirDetection from '@/hooks/use-dir-detection'
 
 type UsageSliderProps = {
   used: number
@@ -17,8 +18,9 @@ const UsageSliderCompact: React.FC<UsageSliderProps> = ({ used, total = 0, statu
   const progressValue = isUnlimited ? 100 : (used / total) * 100
   const color = statusColors[status]?.sliderColor
   const { t } = useTranslation()
+  const isRTL = useDirDetection() === 'rtl'
   return (
-    <div className="flex w-full flex-col justify-between gap-y-1 text-xs font-medium text-muted-foreground text-left">
+    <div className={cn("flex w-full flex-col justify-between gap-y-1 text-xs font-medium text-muted-foreground text-left", isRTL ? "md:text-end" : "md:text-start")}>
       <Progress indicatorClassName={color} value={progressValue} className={cn(isMobile ? 'block' : 'hidden md:block')} />
       <div className="flex items-center justify-between w-full">
         <span className={isMobile ? 'hidden' : 'w-full'} dir="ltr">