chore: better responsive for usage slider compact

Author: x0sina

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

@@ -18,10 +18,10 @@ const UsageSliderCompact: React.FC<UsageSliderProps> = ({ used, total = 0, statu
   const color = statusColors[status]?.sliderColor
   const { t } = useTranslation()
   return (
-    <div className="flex w-full flex-col justify-between gap-y-1 text-xs font-medium text-muted-foreground">
+    <div className="flex w-full flex-col justify-between gap-y-1 text-xs font-medium text-muted-foreground text-left">
       <Progress indicatorClassName={color} value={progressValue} className={cn(isMobile ? 'block' : 'hidden md:block')} />
-      <div className="flex items-center justify-between">
-        <span className={isMobile ? 'hidden' : ''} dir="ltr">
+      <div className="flex items-center justify-between w-full">
+        <span className={isMobile ? 'hidden' : 'w-full'} dir="ltr">
           {formatBytes(used)} / {isUnlimited ? <span className="font-system-ui">∞</span> : formatBytes(total)}
         </span>
         <div className={cn(isMobile ? 'block' : 'hidden md:block')}>