From a9403febee604fe16327e5ac7a5a5f771f870a3c Mon Sep 17 00:00:00 2001
From: k1nq <artkashaev@gmail.com>
Date: Thu, 24 Sep 2026 12:24:53 +0500
Subject: [PATCH] Refactor CategoryManagerModal buttons for improved styling
 and accessibility

---
 .../src/components/budget/CategoryManagerModal.tsx   | 12 ++++++++----
 frontend/src/styles/global.css                       |  7 +++----
 graphify-out/manifest.json                           |  6 +++---
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/budget/CategoryManagerModal.tsx b/frontend/src/components/budget/CategoryManagerModal.tsx
index 393cd8f..49474e1 100644
--- a/frontend/src/components/budget/CategoryManagerModal.tsx
+++ b/frontend/src/components/budget/CategoryManagerModal.tsx
@@ -247,7 +247,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
                           <>
                             {!isSystem ? (
                               <Button
-                                variant="subtle"
+                                variant="ghost"
+                                className="manager-action"
                                 disabled={update.isPending}
                                 onClick={() => setRenameTarget(definition)}
                               >
@@ -256,7 +257,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
                             ) : null}
                             {definition.kind === 'monthly' ? (
                               <Button
-                                variant="subtle"
+                                variant="ghost"
+                                className="manager-action"
                                 disabled={update.isPending}
                                 onClick={() => setMccTarget(definition)}
                               >
@@ -265,7 +267,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
                             ) : null}
                             {!isSystem ? (
                               <Button
-                                variant="subtle"
+                                variant="ghost"
+                                className="manager-action"
                                 disabled={update.isPending}
                                 onClick={() => setArchiveTarget(definition)}
                               >
@@ -275,7 +278,8 @@ export function CategoryManagerModal({ onClose }: { onClose: () => void }) {
                           </>
                         ) : (
                           <Button
-                            variant="subtle"
+                            variant="ghost"
+                            className="manager-action"
                             disabled={update.isPending}
                             onClick={() =>
                               update.mutate({ id: definition.id, payload: { archived: false } })
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 2c35580..40e680c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -683,8 +683,9 @@ input[type='file']::file-selector-button { min-height: 30px; margin-right: 10px;
 .manager-row-main { display: grid; gap: 3px; min-width: 0; }
 .manager-row-name { overflow-wrap: anywhere; font-weight: 500; }
 .manager-row-meta { color: #aaa9a5; font-family: var(--font-data); font-size: 10px; overflow-wrap: anywhere; }
-.manager-row-actions { width: 100%; }
-.manager-row-actions .btn { min-height: 32px; padding: 6px 9px; font-size: 11px; line-height: 1.25; white-space: normal; }
+.manager-row-actions { width: 100%; flex-wrap: nowrap; gap: clamp(8px, 2vw, 16px); }
+.manager-row-actions .manager-action { flex: 0 0 auto; min-height: 32px; padding: 5px 0; color: #a9c4ff; background: transparent; border: 0; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
+.manager-row-actions .manager-action:hover:not(:disabled) { color: var(--white); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
 
 .steps {
   display: grid;
@@ -899,8 +900,6 @@ input[type='file']::file-selector-button { min-height: 30px; margin-right: 10px;
   .decision-panel .blocker-link { color: var(--blue); }
   .manager-form-fields { grid-template-columns: 1fr; }
   .budget-workspace { grid-template-columns: minmax(0, 1fr); }
-  .manager-row-actions { width: 100%; }
-  .manager-row-actions .btn { flex: 1; }
   .pulse-grid { display: block; border: 0; }
   .pulse-item { padding: 13px 0; border-width: 0 0 1px; background: transparent; }
   .mobile-primary-action { position: fixed; right: 12px; bottom: 72px; z-index: 45; display: block; }
diff --git a/graphify-out/manifest.json b/graphify-out/manifest.json
index 33eca0f..780ae3c 100644
--- a/graphify-out/manifest.json
+++ b/graphify-out/manifest.json
@@ -990,9 +990,9 @@
     "semantic_hash": ""
   },
   "frontend/src/components/budget/CategoryManagerModal.tsx": {
-    "mtime": 1790164788.520766,
-    "seen": 1790165332.6990325,
-    "ast_hash": "25e3f09e8aa689ddec8b4324b23bea99",
+    "mtime": 1790221713.0466647,
+    "seen": 1790221831.1906216,
+    "ast_hash": "e7f760a1ed5a384124b2c87081d918ef",
     "semantic_hash": ""
   },
   "frontend/src/lib/accountLabel.ts": {