From 3f1c66ec01120d425c9664b59ab00a9951c8971b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Mon, 22 Dec 2025 19:33:53 +0100
Subject: [PATCH] ui: adjustments

---
 src/components/ReqViewer.tsx | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/ReqViewer.tsx b/src/components/ReqViewer.tsx
index a78be69..943cc75 100644
--- a/src/components/ReqViewer.tsx
+++ b/src/components/ReqViewer.tsx
@@ -946,7 +946,7 @@ export default function ReqViewer({
               </span>
             </div>
           </TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent className="bg-popover text-popover-foreground border border-border shadow-md">
             <p>{getStatusTooltip(overallState)}</p>
           </TooltipContent>
         </Tooltip>
@@ -1057,11 +1057,11 @@ export default function ReqViewer({
 
                   // Build comprehensive tooltip content
                   const tooltipContent = (
-                    <div className="space-y-1 text-xs">
-                      <div className="font-semibold border-b border-border pb-1">
+                    <div className="space-y-1.5 text-xs">
+                      <div className="font-semibold border-b border-border pb-1 mb-1">
                         {url}
                       </div>
-                      <div className="space-y-0.5 text-muted-foreground">
+                      <div className="space-y-1 text-muted-foreground">
                         <div className="flex items-center gap-2">
                           <span className="w-20">Connection:</span>
                           <span className="text-foreground">
@@ -1133,16 +1133,25 @@ export default function ReqViewer({
                           <div className="flex items-center gap-1.5 flex-shrink-0">
                             {/* Event count badge */}
                             {reqState && reqState.eventCount > 0 && (
-                              <div className="text-[10px] text-muted-foreground font-medium">
-                                [{reqState.eventCount}]
+                              <div className="flex items-center gap-1 text-[10px] text-muted-foreground font-medium">
+                                <FileText className="size-2.5" />
+                                <span>{reqState.eventCount}</span>
                               </div>
                             )}
 
-                            {/* EOSE checkmark */}
-                            {reqState &&
-                              reqState.subscriptionState === "eose" && (
-                                <Check className="size-3 text-green-600/70" />
-                              )}
+                            {/* EOSE status */}
+                            {reqState && (
+                              <>
+                                {reqState.subscriptionState === "eose" ? (
+                                  <Check className="size-3 text-green-600/70" />
+                                ) : (
+                                  (reqState.subscriptionState === "receiving" ||
+                                    reqState.subscriptionState === "waiting") && (
+                                    <Loader2 className="size-3 text-muted-foreground/40 animate-spin" />
+                                  )
+                                )}
+                              </>
+                            )}
 
                             {/* Auth icon (always visible) */}
                             <div>{authIcon.icon}</div>
@@ -1152,7 +1161,10 @@ export default function ReqViewer({
                           </div>
                         </div>
                       </TooltipTrigger>
-                      <TooltipContent side="left" className="max-w-xs">
+                      <TooltipContent
+                        side="left"
+                        className="max-w-xs bg-popover text-popover-foreground border border-border shadow-md"
+                      >
                         {tooltipContent}
                       </TooltipContent>
                     </Tooltip>