From 2acd1454e8538cb6ccfd03e3373867b886d60d7f Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Sun, 31 Aug 2025 22:59:23 +0200
Subject: [PATCH] style: enhance tag visibility on TripChecklist with hover
 effects

---
 frontend/src/pages/TripChecklist.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index 217aa12..d761318 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -201,7 +201,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
           <li
             key={item.id}
             className={
-              "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded " +
+              "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
               (item.checked ? "bg-green-100" : "hover:bg-gray-100")
             }
             onClick={async () => {
@@ -221,14 +221,14 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
               {item.name_calculated}
             </span>
             {item.item && item.item.tags && item.item.tags.length > 0 && (
-              <span className="ml-2 flex gap-1">
+              <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                 {[...item.item.tags]
                   .slice()
                   .sort((a, b) => a.name.localeCompare(b.name))
                   .map((tag: any) => (
                     <span
                       key={tag.id}
-                      className="text-xs text-gray-400 bg-gray-100 rounded px-1 py-0.5"
+                      className="text-xs text-gray-400 rounded px-1 py-0.5"
                     >
                       #{tag.name}
                     </span>
@@ -250,7 +250,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
               <li
                 key={item.id}
                 className={
-                  "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded " +
+                  "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
                   (item.checked ? "bg-green-100" : "hover:bg-gray-100")
                 }
                 onClick={async () => {
@@ -270,14 +270,14 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
                   {item.name_calculated}
                 </span>
                 {item.item && item.item.tags && item.item.tags.length > 0 && (
-                  <span className="ml-2 flex gap-1">
+                  <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     {[...item.item.tags]
                       .slice()
                       .sort((a, b) => a.name.localeCompare(b.name))
                       .map((tag: any) => (
                         <span
                           key={tag.id}
-                          className="text-xs text-gray-400 bg-gray-100 rounded px-1 py-0.5"
+                          className="text-xs text-gray-400 rounded px-1 py-0.5"
                         >
                           #{tag.name}
                         </span>