From 49b62fbfb519389396085f5ad6bb4dc9fc6302cd Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 17 Feb 2026 12:14:06 +0700
Subject: [PATCH] refactor(BillingCard): wrap action buttons in a button group
 for improved layout and accessibility

---
 .../src/components/billing/BillingCard.jsx    | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/billing/BillingCard.jsx b/frontend/src/components/billing/BillingCard.jsx
index 93f7460..1902294 100644
--- a/frontend/src/components/billing/BillingCard.jsx
+++ b/frontend/src/components/billing/BillingCard.jsx
@@ -168,29 +168,31 @@ export default function BillingCard({
 
           {/* Правая часть: действия */}
           <div className="d-flex align-items-center gap-2 px-3 border-start">
-            <button 
-              className="btn btn-outline-success" 
-              title="Записать платёж" 
-              onClick={(e) => { e.stopPropagation(); onAddPayment?.(item); }}
-            >
-              <IconCreditCard size={16} className="me-1" />
-              Оплатить
-            </button>
-            <button 
-              className="btn btn-outline-secondary" 
-              title="Редактировать" 
-              onClick={(e) => { e.stopPropagation(); onEdit?.(item); }}
-            >
-              <IconEdit size={16} className="me-1" />
-              Изменить
-            </button>
-            <button 
-              className="btn btn-outline-danger" 
-              title="Удалить" 
-              onClick={(e) => { e.stopPropagation(); onDelete?.(item); }}
-            >
-              <IconTrash size={16} />
-            </button>
+            <div className="btn-group btn-group-sm" role="group" aria-label="Действия с записью биллинга">
+              <button 
+                className="btn btn-outline-success" 
+                title="Записать платёж" 
+                onClick={(e) => { e.stopPropagation(); onAddPayment?.(item); }}
+              >
+                <IconCreditCard size={16} className="me-1" />
+                Оплатить
+              </button>
+              <button 
+                className="btn btn-outline-secondary" 
+                title="Редактировать" 
+                onClick={(e) => { e.stopPropagation(); onEdit?.(item); }}
+              >
+                <IconEdit size={16} className="me-1" />
+                Изменить
+              </button>
+              <button 
+                className="btn btn-outline-danger" 
+                title="Удалить" 
+                onClick={(e) => { e.stopPropagation(); onDelete?.(item); }}
+              >
+                <IconTrash size={16} />
+              </button>
+            </div>
             <button 
               className="btn btn-ghost-secondary btn-icon ms-1" 
               onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}