fix: preserve chart width on mobile

src/lib/components/PaymentHistoryChart.svelte

@@ -71,7 +71,15 @@
   }
 </script>
 
-<div class="relative min-h-[290px] w-full overflow-hidden" dir="ltr">
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (the horizontally scrollable chart must be keyboard reachable) -->
+<div
+  class="w-full overflow-x-auto overscroll-x-contain"
+  dir="ltr"
+  role="region"
+  aria-label="نمودار روند پرداخت‌های موفق، قابل پیمایش افقی"
+  tabindex="0"
+>
+  <div class="relative min-h-[290px] min-w-[760px] md:min-w-0">
     {#if data.length === 0}
       <div class="text-muted-foreground grid h-[260px] place-items-center text-sm">
         داده‌ای برای این بازه ثبت نشده است.
@@ -197,6 +205,7 @@
       {/if}
     {/if}
   </div>
+</div>
 
 <style>
   .chart-line {

src/lib/components/PaymentHistoryChart.test.ts

@@ -28,5 +28,9 @@ describe('PaymentHistoryChart', () => {
     expect(screen.getByText('۰۰:۰۰')).not.toBeNull();
     expect(screen.getByText('۱۲:۰۰')).not.toBeNull();
     expect(screen.getByText('ساعت')).not.toBeNull();
+
+    const scrollRegion = screen.getByRole('region', { name: /قابل پیمایش افقی/ });
+    expect(scrollRegion.className).toContain('overflow-x-auto');
+    expect(scrollRegion.firstElementChild?.className).toContain('min-w-[760px]');
   });
 });