feat(preprod): Add second row with build number, version info and date to comparison screen (EME-520) (#104117)

## Summary
Adds a second line of information showing version build number and date.
I also adjust the logic to only show the buildId if the build number is
missing since it was confusing the difference between the buildId and
buildNumber when presented visually.

Before:
<img width="1321" height="318" alt="image"
src="https://github.com/user-attachments/assets/363a41d6-ab9a-42b9-ac69-3c4bc659da7d"
/>

After:
<img width="1323" height="338" alt="image"
src="https://github.com/user-attachments/assets/4869c401-88ce-4254-b5c9-71f616aa0bcd"
/>


Also on comparison selection screen:
<img width="1320" height="269" alt="image"
src="https://github.com/user-attachments/assets/b58ee1f0-dd28-47a9-b50d-127a7f810082"
/>

Also light mode:
<img width="907" height="88" alt="image"
src="https://github.com/user-attachments/assets/e73344f3-5278-4bfc-a148-82d2751fbecf"
/>


## Changes
- Added two-line layout showing version, build number, and date
- Increased text size from small to medium for better readability
- Metadata line (version, build number, date) aligned with build info

Fixes EME-520

Author: runningcode

static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx

@@ -9,6 +9,7 @@ import {IconClose, IconCommit, IconFocus, IconLock, IconTelescope} from 'sentry/
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {getFormat, getFormattedDate} from 'sentry/utils/dates';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
@@ -35,12 +36,34 @@ function BuildButton({
   const sha = buildDetails.vcs_info?.head_sha?.substring(0, 7);
   const branchName = buildDetails.vcs_info?.head_ref;
   const buildId = buildDetails.id;
+  const version = buildDetails.app_info?.version;
+  const buildNumber = buildDetails.app_info?.build_number;
+  const dateBuilt = buildDetails.app_info?.date_built;
+  const dateAdded = buildDetails.app_info?.date_added;
 
   const buildUrl = `/organizations/${organization.slug}/preprod/${projectId}/${buildId}/`;
   const platform = buildDetails.app_info?.platform ?? null;
 
+  const dateToShow = dateBuilt || dateAdded;
+  const formattedDate = getFormattedDate(
+    dateToShow,
+    getFormat({timeZone: true, year: true}),
+    {
+      local: true,
+    }
+  );
+
+  // Build metadata parts for the second line
+  const metadataParts = [formattedDate];
+  if (version) {
+    metadataParts.unshift(`Version ${version}`);
+  }
+  if (buildNumber) {
+    metadataParts.unshift(`Build ${buildNumber}`);
+  }
+
   return (
-    <LinkButton
+    <StyledLinkButton
       to={buildUrl}
       onClick={() =>
         trackAnalytics('preprod.builds.compare.go_to_build_details', {
@@ -53,15 +76,17 @@ function BuildButton({
         })
       }
     >
-      <Flex align="center" gap="sm">
-        {icon}
-        <Text size="sm" variant="accent" bold>
-          {label}
-        </Text>
-        <Flex align="center" gap="md">
+      <Flex direction="column" gap="xs">
+        <Flex align="center" gap="sm">
+          {icon}
           <Text size="sm" variant="accent" bold>
-            {`#${buildId}`}
+            {label}
           </Text>
+          {!buildNumber && (
+            <Text size="sm" variant="accent" bold>
+              {`#${buildId}`}
+            </Text>
+          )}
           {sha && (
             <Flex align="center" gap="xs">
               <IconCommit size="xs" />
@@ -70,33 +95,43 @@ function BuildButton({
               </Text>
             </Flex>
           )}
+          {branchName && (
+            <BuildBranch>
+              <Text size="sm" variant="muted">
+                {branchName}
+              </Text>
+            </BuildBranch>
+          )}
+          {onRemove && (
+            <Button
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove();
+              }}
+              size="zero"
+              priority="transparent"
+              borderless
+              aria-label={t('Clear base build')}
+              icon={<IconClose size="xs" color="purple400" />}
+            />
+          )}
+        </Flex>
+        <Flex align="center" gap="sm">
+          <Text size="sm" variant="muted">
+            {metadataParts.join(' • ')}
+          </Text>
         </Flex>
-        {branchName && (
-          <BuildBranch>
-            <Text size="sm" variant="muted">
-              {branchName}
-            </Text>
-          </BuildBranch>
-        )}
-        {onRemove && (
-          <Button
-            onClick={e => {
-              e.preventDefault();
-              e.stopPropagation();
-              onRemove();
-            }}
-            size="zero"
-            priority="transparent"
-            borderless
-            aria-label={t('Clear base build')}
-            icon={<IconClose size="xs" color="purple400" />}
-          />
-        )}
       </Flex>
-    </LinkButton>
+    </StyledLinkButton>
   );
 }
 
+const StyledLinkButton = styled(LinkButton)`
+  height: auto;
+  min-height: auto;
+`;
+
 const ComparisonContainer = styled(Flex)`
   flex-wrap: wrap;
   align-items: center;