From 78089500e40e9d0ce6e9c1610e52f9c0d656a673 Mon Sep 17 00:00:00 2001
From: Rakshith Bhat <88523594+RakshithBhat03@users.noreply.github.com>
Date: Sun, 11 Oct 2026 12:18:22 +0530
Subject: [PATCH] fix(web): align the API estimate info icon (#15655)

---
 apps/web/src/components/usage/UsagePage.tsx | 46 +++++++++------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 26a042d7a721ccf81872afa2d970b25ac4c37098..08a07241b612375d0f1ca1a23ac945f674e20628 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -587,33 +587,27 @@ export function UsagePage() {
                           ? formatUsd(merged.costUsd)
                           : formatTokens(merged.totalTokens)}
                       </span>
-                      <span className="text-xs text-muted-foreground">
-                        <span className={figureClass(loading.partial)}>
-                          {formatCount(merged.sessions)} sessions
+                      <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                        <span>
+                          <span className={figureClass(loading.partial)}>
+                            {formatCount(merged.sessions)} sessions
+                          </span>
+                          {metric === "cost" && " · API estimate"}
                         </span>
-                        {metric === "cost" && (
-                          <>
-                            {" · API estimate"}
-                            {merged.costQuality.unpricedShare > 0 && (
-                              <>
-                                {" "}
-                                <Popover>
-                                  <PopoverTrigger
-                                    openOnHover
-                                    render={<InlineButton tone="muted" />}
-                                    aria-label="Unpriced usage details"
-                                  >
-                                    <InfoIcon className="size-3" aria-hidden />
-                                  </PopoverTrigger>
-                                  <PopoverPopup side="top" tooltipStyle>
-                                    API estimate excludes{" "}
-                                    {formatPercent(merged.costQuality.unpricedShare)} unpriced
-                                    records.
-                                  </PopoverPopup>
-                                </Popover>
-                              </>
-                            )}
-                          </>
+                        {metric === "cost" && merged.costQuality.unpricedShare > 0 && (
+                          <Popover>
+                            <PopoverTrigger
+                              openOnHover
+                              render={<InlineButton tone="muted" />}
+                              aria-label="Unpriced usage details"
+                            >
+                              <InfoIcon className="size-3" aria-hidden />
+                            </PopoverTrigger>
+                            <PopoverPopup side="top" tooltipStyle>
+                              API estimate excludes{" "}
+                              {formatPercent(merged.costQuality.unpricedShare)} unpriced records.
+                            </PopoverPopup>
+                          </Popover>
                         )}
                       </span>
                     </div>
-- 
2.54.0