From 913fee884f83ca8118b649c452cb26d2eb739822 Mon Sep 17 00:00:00 2001
From: Trevor Elkins <trevor@emergetools.com>
Date: Tue, 25 Nov 2025 12:09:58 -0500
Subject: [PATCH] fix(preprod): fix positioning of app size tooltip

---
 .../main/buildDetailsMetricCards.tsx          | 56 ++++++++-----------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/static/app/views/preprod/buildDetails/main/buildDetailsMetricCards.tsx b/static/app/views/preprod/buildDetails/main/buildDetailsMetricCards.tsx
index 13140929212351..5df12b877f0b10 100644
--- a/static/app/views/preprod/buildDetails/main/buildDetailsMetricCards.tsx
+++ b/static/app/views/preprod/buildDetails/main/buildDetailsMetricCards.tsx
@@ -122,33 +122,24 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
 
   return (
     <Flex gap="lg" wrap="wrap">
-      {metricsCards.map(card => {
-        const valueContent = (
+      {metricsCards.map(card => (
+        <MetricCard
+          key={card.key}
+          icon={card.icon}
+          label={card.title}
+          labelTooltip={card.labelTooltip}
+          action={
+            card.showInsightsButton
+              ? {
+                  icon: <IconSettings size="sm" color="white" />,
+                  tooltip: t('View insight details'),
+                  ariaLabel: t('View insight details'),
+                  onClick: onOpenInsightsSidebar,
+                }
+              : undefined
+          }
+        >
           <Heading as="h3">
-            <MetricValue $interactive={Boolean(card.watchBreakdown)}>
-              {card.value}
-            </MetricValue>
-            {card.percentageText ?? ''}
-          </Heading>
-        );
-
-        return (
-          <MetricCard
-            key={card.key}
-            icon={card.icon}
-            label={card.title}
-            labelTooltip={card.labelTooltip}
-            action={
-              card.showInsightsButton
-                ? {
-                    icon: <IconSettings size="sm" color="white" />,
-                    tooltip: t('View insight details'),
-                    ariaLabel: t('View insight details'),
-                    onClick: onOpenInsightsSidebar,
-                  }
-                : undefined
-            }
-          >
             {card.watchBreakdown ? (
               <Tooltip
                 title={
@@ -157,16 +148,17 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
                     watchValue={card.watchBreakdown.watchValue}
                   />
                 }
-                position="left"
+                position="bottom"
               >
-                {valueContent}
+                <MetricValue $interactive>{card.value}</MetricValue>
               </Tooltip>
             ) : (
-              valueContent
+              <MetricValue>{card.value}</MetricValue>
             )}
-          </MetricCard>
-        );
-      })}
+            {card.percentageText ?? ''}
+          </Heading>
+        </MetricCard>
+      ))}
     </Flex>
   );
 }