From 4dd9fe822e7de3a2037583f5bf4d56dae2ac025f Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 17 Oct 2025 08:26:42 -0700
Subject: [PATCH] Improve alignment and logic around Arch linux os version
 displays (#34420)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related issue:** Resolves #34214

- Alignment in host summary fixed for both Firefox(L) and Chrome(R):
<img width="1728" height="221" alt="Screenshot 2025-10-16 at 6 38 39 PM"
src="https://github.com/user-attachments/assets/27d4489d-7a90-41bd-9b7d-53dfc95e4000"
/>

- Fix detection logic in Software > OS Versions table, render
tooltip-wrapped "rolling" there when appropriate

- [x] QA'd all new/changed functionality manually
---
 .../cards/OperatingSystems/OSTableConfig.tsx  | 17 +++++----
 .../details/cards/HostSummary/HostSummary.tsx | 38 +++++++++++--------
 .../details/cards/HostSummary/_styles.scss    |  4 ++
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/OSTableConfig.tsx b/frontend/pages/DashboardPage/cards/OperatingSystems/OSTableConfig.tsx
index 5864de6481..af6900474f 100644
--- a/frontend/pages/DashboardPage/cards/OperatingSystems/OSTableConfig.tsx
+++ b/frontend/pages/DashboardPage/cards/OperatingSystems/OSTableConfig.tsx
@@ -96,21 +96,22 @@ const generateDefaultTableHeaders = (
   {
     Header: "Version",
     disableSortBy: true,
-    accessor: "version",
     Cell: (cellProps: IVersionCellProps) => {
-      const value = cellProps.cell.value;
+      const { version, name_only } = cellProps.row.original;
       if (
-        (cellProps.row.values.name_only === "Arch Linux" ||
-          cellProps.row.values.name_only === "Arch Linux ARM" ||
-          cellProps.row.values.name_only === "Manjaro Linux" ||
-          cellProps.row.values.name_only === "Manjaro Linux ARM") &&
-        value === "rolling"
+        [
+          "Arch Linux",
+          "Arch Linux ARM",
+          "Manjaro Linux",
+          "Manjaro Linux ARM",
+        ].includes(name_only) &&
+        version === "rolling"
       ) {
         return (
           <TextCell value={<TooltipWrapperArchLinuxRolling capitalized />} />
         );
       }
-      return <TextCell value={value} />;
+      return <TextCell value={version} />;
     },
   },
   {
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 120abf9f42..751c62010c 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@@ -254,22 +254,28 @@ const HostSummary = ({
   const renderOperatingSystemSummary = () => {
     // No tooltip if minimum version is not set, including all Windows, Linux, ChromeOS, Android operating systems
     if (!osVersionRequirement?.minimum_version) {
-      let value = summaryData.os_version;
-      if (
-        value === "Arch Linux rolling" ||
-        value === "Arch Linux ARM rolling" ||
-        value === "Manjaro Linux rolling" ||
-        value === "Manjaro Linux ARM rolling"
-      ) {
-        const archLinuxPrefix = value.slice(0, -8); // removing lowercase "rolling" suffix
-        value = (
-          <>
-            {archLinuxPrefix}&nbsp;
-            <TooltipWrapperArchLinuxRolling />
-          </>
-        );
-      }
-      return <DataSet title="Operating system" value={value} />;
+      const version = summaryData.os_version;
+      const versionForRender = [
+        "Arch Linux rolling",
+        "Arch Linux ARM rolling",
+        "Manjaro Linux rolling",
+        "Manjaro Linux ARM rolling",
+      ].includes(version) ? (
+        // wrap a tooltip aroun the "rolling" suffix
+        <>
+          {version.slice(0, -8)}
+          <TooltipWrapperArchLinuxRolling />
+        </>
+      ) : (
+        version
+      );
+      return (
+        <DataSet
+          title="Operating system"
+          value={versionForRender}
+          className={`${baseClass}__os-data-set`}
+        />
+      );
     }
 
     const osVersionWithoutPrefix = removeOSPrefix(summaryData.os_version);
diff --git a/frontend/pages/hosts/details/cards/HostSummary/_styles.scss b/frontend/pages/hosts/details/cards/HostSummary/_styles.scss
index 671bbb5102..29cca74e81 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/_styles.scss
+++ b/frontend/pages/hosts/details/cards/HostSummary/_styles.scss
@@ -4,6 +4,10 @@
   padding: $pad-xxlarge;
   flex-wrap: wrap;
 
+  &__os-data-set dd {
+    align-items: baseline;
+  }
+
   // Properly vertically aligns host issue icon
   .host-issue {
     display: flex;