From 88f01554e74ea4c5704a4f030d0225d7b53ba1f7 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 11 Oct 2025 09:06:17 +0100
Subject: [PATCH] fix: improve mobile touch targets for highlight icons

- Increase touch target size to 44x44px on mobile (relay & delete icons)
- Add proper padding to both icons for larger tap area
- Increase spacing between relay and delete icons
- Expand quote icon container width on mobile to accommodate both targets
- Increase icon font size on mobile (0.85rem) for better visibility
- Move icons slightly outward (-8px) to prevent overlap

Icons are now much easier to tap on mobile devices without
accidentally hitting the wrong button.
---
 src/index.css | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index 0c8bcfef..2b03544a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2084,13 +2084,19 @@ body.mobile-sidebar-open {
 
 .highlight-relay-indicator {
   position: absolute;
-  bottom: -2px;
-  left: 0;
+  bottom: -4px;
+  left: -6px;
   font-size: 0.7rem;
   color: #888;
   opacity: 0.7;
   transition: all 0.2s ease;
   cursor: pointer;
+  padding: 4px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .highlight-relay-indicator:hover {
@@ -2105,13 +2111,19 @@ body.mobile-sidebar-open {
 
 .highlight-delete-btn {
   position: absolute;
-  bottom: -2px;
-  right: 0;
+  bottom: -4px;
+  right: -6px;
   font-size: 0.7rem;
   color: #888;
   opacity: 0.7;
   transition: all 0.2s ease;
   cursor: pointer;
+  padding: 4px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .highlight-delete-btn:hover {
@@ -2124,6 +2136,31 @@ body.mobile-sidebar-open {
   transform: scale(0.95);
 }
 
+/* Mobile: Larger touch targets and better spacing */
+@media (max-width: 768px) {
+  .highlight-quote-icon {
+    min-width: 100px; /* Ensure enough space for both touch targets */
+  }
+  
+  .highlight-relay-indicator {
+    bottom: -8px;
+    left: -8px;
+    padding: 8px;
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+    font-size: 0.85rem;
+  }
+  
+  .highlight-delete-btn {
+    bottom: -8px;
+    right: -8px;
+    padding: 8px;
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+    font-size: 0.85rem;
+  }
+}
+
 /* Level-colored quote icon */
 .highlight-item.level-mine .highlight-quote-icon {
   color: var(--highlight-color-mine, #ffff00);