From 04018a27edacb2bfa71f104004f5a2ce00653e20 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 2 Jun 2026 18:14:55 -0400
Subject: [PATCH] Fine tuning the styles

---
 .../badges/ae_comp__badge_obj_li.svelte       | 59 ++++++++++++++++---
 1 file changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
index 6c675f97..1ba0ecbf 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
@@ -192,7 +192,8 @@ let visible_badge_obj_li = $derived(
                             {#if row_clickable}
                                 <a
                                     href={row_href}
-                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1 transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg
+                                    class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-800 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1
+                                    transition-all duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg
                                     max-w-4xl
                                     "
                                     title={is_trusted
@@ -207,12 +208,28 @@ let visible_badge_obj_li = $derived(
                                         <User size="1.1em" class="text-primary-500" />
                                     {/if}
 
-                                    <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
-                                        <span class="truncate font-semibold min-w-44 max-w-64">{display_name}</span>
+                                    <div class="
+                                        flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0
+                                        hover:scale-115
+                                        ease-in-out
+                                        transition-all duration-1000 hover:duration-500
+                                        hover:bg-primary-200-800 active:bg-primary-200-800
+                                        ">
+                                        <span class="truncate font-semibold min-w-44 max-w-64 ">{display_name}</span>
 
                                         {#if show_sensitive_fields && event_badge_obj?.email}
 
-                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52 max-w-64">
+                                            <span class="
+                                                text-surface-600-400
+                                                bg-surface-100-900 rounded
+                                                px-1.5 py-0.5
+                                                font-mono text-sm
+                                                select-all hover:bg-surface-100-900
+                                                hover:text-surface-900-100
+                                                truncate min-w-52 max-w-64
+                                                transition-all duration-1000 hover:duration-100
+                                                "
+                                                >
                                                 {is_trusted
                                                     ? event_badge_obj.email
                                                     : obscure_email(event_badge_obj.email)}
@@ -221,7 +238,15 @@ let visible_badge_obj_li = $derived(
 
                                         {#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
 
-                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52 max-w-64">
+                                            <span class="
+                                                text-surface-600-400 bg-surface-100-900 rounded
+                                                px-1.5 py-0.5
+                                                font-mono italic text-sm
+                                                select-all hover:bg-surface-100-900
+                                                hover:text-surface-900-100
+                                                truncate min-w-52 max-w-64
+                                                transition-all duration-1000 hover:duration-100
+                                                ">
                                                 {event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
                                             </span>
                                         {/if}
@@ -229,7 +254,9 @@ let visible_badge_obj_li = $derived(
                                 </a>
                             {:else if is_attendee_printed}
                                 <!-- Public attendee, badge already printed: show check-in status, no action -->
-                                <div class="flex items-center gap-3 justify-start px-3 py-2 flex-1 min-w-0 rounded-lg bg-success-500/10">
+                                <div class="
+                                    flex items-center gap-3 justify-start px-3 py-2 flex-1 min-w-0 rounded-lg bg-success-500/10
+                                    ">
                                     <Check size="1.1em" class="text-success-600 dark:text-success-400 shrink-0" />
                                     <div class="flex flex-col min-w-0">
                                         <span class="truncate font-semibold">{display_name}</span>
@@ -266,7 +293,15 @@ let visible_badge_obj_li = $derived(
                                         <span class="truncate font-semibold min-w-44">{display_name}</span>
 
                                         {#if show_sensitive_fields && event_badge_obj?.email}
-                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52">
+                                            <span class="
+                                                text-surface-600-400 bg-surface-100-900 rounded
+                                                px-1.5 py-0.5
+                                                font-mono italic text-sm
+                                                select-all hover:bg-surface-100-900
+                                                hover:text-surface-900-100
+                                                truncate min-w-52 max-w-64
+                                                transition-all duration-1000 hover:duration-100
+                                                ">
                                                 {is_trusted
                                                     ? event_badge_obj.email
                                                     : obscure_email(event_badge_obj.email)}
@@ -274,7 +309,15 @@ let visible_badge_obj_li = $derived(
                                         {/if}
 
                                         {#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
-                                            <span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52">
+                                            <span class="
+                                                text-surface-600-400 bg-surface-100-900 rounded
+                                                px-1.5 py-0.5
+                                                font-mono italic text-sm
+                                                select-all hover:bg-surface-100-900
+                                                hover:text-surface-900-100
+                                                truncate min-w-52 max-w-64
+                                                transition-all duration-1000 hover:duration-100
+                                                ">
                                                 {event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
                                             </span>
                                         {/if}