fix: refine responsive dashboard filters

src/lib/components/FeeShareDonut.svelte

@@ -4,15 +4,16 @@
   import { Card, CardContent } from '$lib/components/ui/card';
   import * as Tooltip from '$lib/components/ui/tooltip';
   import { formatPercent } from '$lib/format';
+  import { cn } from '$lib/utils';
 
-  let { value }: { value: string | null } = $props();
+  let { value, class: className }: { value: string | null; class?: string } = $props();
   const percent = $derived(value === null ? 0 : Math.max(0, Math.min(100, Number(value))));
 </script>
 
-<Card class="rounded-lg shadow-xs">
-  <CardContent class="flex h-full items-center gap-4 p-4 sm:p-5">
+<Card class={cn('rounded-lg shadow-xs', className)}>
+  <CardContent class="flex h-full flex-col items-center justify-center gap-5 p-6 text-center sm:p-8">
     <div
-      class="relative grid size-24 shrink-0 place-items-center"
+      class="relative grid size-40 shrink-0 place-items-center sm:size-48"
       role="img"
       aria-label={`سهم کارمزد ${formatPercent(value)}`}
     >
@@ -31,10 +32,10 @@
           class="transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"
         />
       </svg>
-      <strong class="absolute text-sm tabular-nums">{formatPercent(value)}</strong>
+      <strong class="absolute text-xl font-extrabold tabular-nums">{formatPercent(value)}</strong>
     </div>
-    <div class="min-w-0">
-      <div class="flex items-center gap-1.5">
+    <div class="max-w-sm min-w-0">
+      <div class="flex items-center justify-center gap-1.5">
         <h2 class="text-sm font-semibold">سهم کارمزد از پرداخت موفق</h2>
         <Tooltip.Root>
           <Tooltip.Trigger
@@ -47,7 +48,7 @@
           >
         </Tooltip.Root>
       </div>
-      <p class="text-muted-foreground mt-2 text-xs leading-6">
+      <p class="text-muted-foreground mt-2 text-sm leading-7">
         بخش آبی، سهم واقعی کارمزد را از کل مبلغ موفق این بازه نشان می‌دهد.
       </p>
     </div>