From 49ff65b85990ab5852899c30bd0ce30c82f17c6c Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 13 May 2025 17:16:37 -0400
Subject: [PATCH] Fleet UI: Unreleased bug separating card from details summary
 component (#29113)

---
 .../SoftwareOSDetailsPage.tsx                 | 28 +++++++++++--------
 .../SoftwareVersionDetailsPage.tsx            | 28 +++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
index ca6b970a10..7090564f5c 100644
--- a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
@@ -164,17 +164,23 @@ const SoftwareOSDetailsPage = ({
           />
         ) : (
           <>
-            <SoftwareDetailsSummary
-              title={osVersionDetails.name}
-              hosts={osVersionDetails.hosts_count}
-              countsUpdatedAt={counts_updated_at}
-              queryParams={{
-                os_name: osVersionDetails.name_only,
-                os_version: osVersionDetails.version,
-                team_id: teamIdForApi,
-              }}
-              name={osVersionDetails.platform}
-            />
+            <Card
+              borderRadiusSize="xxlarge"
+              includeShadow
+              className={`${baseClass}__summary-section`}
+            >
+              <SoftwareDetailsSummary
+                title={osVersionDetails.name}
+                hosts={osVersionDetails.hosts_count}
+                countsUpdatedAt={counts_updated_at}
+                queryParams={{
+                  os_name: osVersionDetails.name_only,
+                  os_version: osVersionDetails.version,
+                  team_id: teamIdForApi,
+                }}
+                name={osVersionDetails.platform}
+              />
+            </Card>
             <Card
               borderRadiusSize="xxlarge"
               includeShadow
diff --git a/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
index 6e06e82ebd..fe9603e025 100644
--- a/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx
@@ -159,17 +159,23 @@ const SoftwareVersionDetailsPage = ({
           />
         ) : (
           <>
-            <SoftwareDetailsSummary
-              title={`${softwareVersion.name}, ${softwareVersion.version}`}
-              type={formatSoftwareType(softwareVersion)}
-              hosts={hostsCount ?? 0}
-              queryParams={{
-                software_version_id: softwareVersion.id,
-                team_id: teamIdForApi,
-              }}
-              name={softwareVersion.name}
-              source={softwareVersion.source}
-            />
+            <Card
+              borderRadiusSize="xxlarge"
+              includeShadow
+              className={`${baseClass}__summary-section`}
+            >
+              <SoftwareDetailsSummary
+                title={`${softwareVersion.name}, ${softwareVersion.version}`}
+                type={formatSoftwareType(softwareVersion)}
+                hosts={hostsCount ?? 0}
+                queryParams={{
+                  software_version_id: softwareVersion.id,
+                  team_id: teamIdForApi,
+                }}
+                name={softwareVersion.name}
+                source={softwareVersion.source}
+              />
+            </Card>
             <Card
               borderRadiusSize="xxlarge"
               includeShadow