From baba593e61884d2977d311259dd3ebf34fca8e17 Mon Sep 17 00:00:00 2001
From: Juan Fernandez <juan-fdz-hawa@users.noreply.github.com>
Date: Tue, 21 Apr 2026 19:47:10 -0400
Subject: [PATCH] Make labels on the host detail page render horizontally
 (#43933)

**Related issue:** Resolves #43914

Make labels on the host detail page render horizontally.
---
 frontend/pages/hosts/details/cards/Labels/Labels.tsx |  6 +++---
 .../pages/hosts/details/cards/Labels/_styles.scss    | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/Labels/Labels.tsx b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
index 47d247917d..60b59413b1 100644
--- a/frontend/pages/hosts/details/cards/Labels/Labels.tsx
+++ b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
@@ -28,11 +28,11 @@ const Labels = ({
     .filter((label: ILabel) => label.label_type !== "builtin")
     .map((label: ILabel) => {
       return (
-        <li className="list__item" key={label.id}>
+        <li className={`${baseClass}__list-item`} key={label.id}>
           <Button
             onClick={() => onLabelClick(label)}
             variant="pill"
-            className="list__button"
+            className={`${baseClass}__list-button`}
           >
             <TooltipTruncatedText value={label.name} />
           </Button>
@@ -52,7 +52,7 @@ const Labels = ({
           No labels are associated with this host.
         </p>
       ) : (
-        <ul className="list">{labelItems}</ul>
+        <ul className={`${baseClass}__list`}>{labelItems}</ul>
       )}
     </Card>
   );
diff --git a/frontend/pages/hosts/details/cards/Labels/_styles.scss b/frontend/pages/hosts/details/cards/Labels/_styles.scss
index 35ac912224..d9fc4969ac 100644
--- a/frontend/pages/hosts/details/cards/Labels/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Labels/_styles.scss
@@ -1,14 +1,18 @@
 .host-labels-card {
   @include vertical-card-layout;
 
-  .list {
+  &__list {
     display: flex;
+    flex-direction: row;
     flex-wrap: wrap;
     gap: $pad-small;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
 
-    .list__item {
-      margin-bottom: 0;
-    }
+  &__list-item {
+    margin-bottom: 0;
   }
 
   .button,