From 84dc8e97212c12e0aa64f9283dec01b5d6c76457 Mon Sep 17 00:00:00 2001
From: ZProger <zproger@users.noreply.github.com>
Date: Sun, 30 Aug 2026 19:15:31 +0300
Subject: [PATCH] fix: reserve fixed-width chevron slot so category amounts
 stay aligned
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Стрелка-шеврон появлялась только у строк с дочерними категориями, из-за
чего сумма в такой строке сдвигалась влево относительно остальных.
Теперь под стрелку всегда резервируется одинаковое место (пустое, если
разбивки нет), и суммы во всех строках выравниваются по одному краю.
---
 .../dashboard/SpendingByCategoryCard.tsx      | 25 +++++++++++--------
 .../reports/CategoryRankingCard.tsx           | 25 +++++++++++--------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/dashboard/SpendingByCategoryCard.tsx b/frontend/src/components/dashboard/SpendingByCategoryCard.tsx
index d3370e9..b1ea417 100644
--- a/frontend/src/components/dashboard/SpendingByCategoryCard.tsx
+++ b/frontend/src/components/dashboard/SpendingByCategoryCard.tsx
@@ -89,16 +89,21 @@ export function SpendingByCategoryCard({ items }: SpendingByCategoryCardProps) {
                     <span className="shrink-0 text-sm font-medium tabular-nums text-text-primary">
                       {formatCurrency(item.amount)}
                     </span>
-                    {hasChildren && (
-                      <button
-                        type="button"
-                        aria-label={t("common.expand")}
-                        onClick={() => setBreakdownItem(item)}
-                        className="shrink-0 rounded-md p-1 text-text-muted hover:bg-surface-2 hover:text-text-primary"
-                      >
-                        <ChevronRight size={15} />
-                      </button>
-                    )}
+                    {/* Fixed-width slot on every row, populated or not — a
+                        chevron shown only on rows with children would shift
+                        their amount left relative to every other row's. */}
+                    <span className="flex h-6 w-5 shrink-0 items-center justify-center">
+                      {hasChildren && (
+                        <button
+                          type="button"
+                          aria-label={t("common.expand")}
+                          onClick={() => setBreakdownItem(item)}
+                          className="rounded-md p-0.5 text-text-muted hover:bg-surface-2 hover:text-text-primary"
+                        >
+                          <ChevronRight size={15} />
+                        </button>
+                      )}
+                    </span>
                   </li>
                 );
               })}
diff --git a/frontend/src/components/reports/CategoryRankingCard.tsx b/frontend/src/components/reports/CategoryRankingCard.tsx
index b4c26ea..31ac51a 100644
--- a/frontend/src/components/reports/CategoryRankingCard.tsx
+++ b/frontend/src/components/reports/CategoryRankingCard.tsx
@@ -80,16 +80,21 @@ export function CategoryRankingCard({ items, isLoading, selectedCategoryId, onSe
                         {formatCurrency(item.amount)}
                       </span>
                     </button>
-                    {hasChildren && (
-                      <button
-                        type="button"
-                        aria-label={t("common.expand")}
-                        onClick={() => setBreakdownItem(item)}
-                        className="mr-1 shrink-0 rounded-md p-1.5 text-text-muted hover:text-text-primary"
-                      >
-                        <ChevronRight size={14} />
-                      </button>
-                    )}
+                    {/* Fixed-width slot on every row, populated or not — a
+                        chevron shown only on rows with children would shift
+                        their amount left relative to every other row's. */}
+                    <span className="mr-1 flex h-8 w-7 shrink-0 items-center justify-center">
+                      {hasChildren && (
+                        <button
+                          type="button"
+                          aria-label={t("common.expand")}
+                          onClick={() => setBreakdownItem(item)}
+                          className="rounded-md p-1.5 text-text-muted hover:text-text-primary"
+                        >
+                          <ChevronRight size={14} />
+                        </button>
+                      )}
+                    </span>
                   </div>
                 </li>
               );