From 900b6f45c5c85803a6704f68e3ae406214cb20dc Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:32:05 +0100
Subject: [PATCH] fix: use pencil and trash icons for tap row actions

Replaces text "Edit"/"Del" buttons with pencil and trash can icon
buttons matching the style used elsewhere in the UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Routes/RouteDetail.module.css | 19 ++++++++++++++++++-
 ui/src/pages/Routes/RouteDetail.tsx        |  6 +++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/Routes/RouteDetail.module.css b/ui/src/pages/Routes/RouteDetail.module.css
index 2bf41cd5..b67a4cc4 100644
--- a/ui/src/pages/Routes/RouteDetail.module.css
+++ b/ui/src/pages/Routes/RouteDetail.module.css
@@ -329,7 +329,24 @@
 
 .tapActions {
   display: flex;
-  gap: 4px;
+  gap: 6px;
+  align-items: center;
+}
+
+.tapActionBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  transition: color 0.15s;
+}
+
+.tapActionBtn:hover {
+  color: var(--text-primary);
 }
 
 /* Tap modal */
diff --git a/ui/src/pages/Routes/RouteDetail.tsx b/ui/src/pages/Routes/RouteDetail.tsx
index 574c075c..3eb0a8d4 100644
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -609,11 +609,11 @@ export default function RouteDetail() {
     {
       key: 'actions' as any,
       header: '',
-      width: '100px',
+      width: '80px',
       render: (_, row) => (
         <div className={styles.tapActions}>
-          <Button variant="ghost" size="sm" onClick={() => openTapModal(row)}>Edit</Button>
-          <Button variant="ghost" size="sm" onClick={() => setDeletingTap(row)}>Del</Button>
+          <button className={styles.tapActionBtn} title="Edit" onClick={() => openTapModal(row)}>&#x270E;</button>
+          <button className={styles.tapActionBtn} title="Delete" onClick={() => setDeletingTap(row)}>&#x1F5D1;</button>
         </div>
       ),
     },