fix: Group edit and delete buttons together in BatteryCard

Wrap edit and delete buttons in a flex container so they appear
next to each other instead of spread apart.

🤖 Generated with [Qoder][https://qoder.com]

src/components/battery/BatteryCard.tsx

@@ -150,22 +150,24 @@ export function BatteryCard({ battery, devices }: BatteryCardProps) {
             </h3>
             <p className="text-sm text-slate-500">Total: {total} batteries</p>
           </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setShowEditModal(true)}
-            className="text-slate-400 hover:text-slate-600"
-          >
-            <Pencil className="w-4 h-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setActionModal('delete')}
-            className="text-slate-400 hover:text-red-600"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
+          <div className="flex gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowEditModal(true)}
+              className="text-slate-400 hover:text-slate-600"
+            >
+              <Pencil className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setActionModal('delete')}
+              className="text-slate-400 hover:text-red-600"
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
 
         <div className="flex flex-wrap gap-2 mb-4">