From 43a26f014ec384b05df15a825c167fc1501d1361 Mon Sep 17 00:00:00 2001
From: jgyselov <jgyselov@redhat.com>
Date: Thu, 9 Oct 2025 11:25:23 +0200
Subject: [PATCH 1/2] Improve alert spacing

---
 .../clusterConfiguration/DownloadIso.tsx      |  2 +
 .../ClusterDetailStatusMessages.tsx           | 60 +++++++++++--------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx
index 2ba7e16b0c..a19f28719e 100644
--- a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx
+++ b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx
@@ -103,6 +103,8 @@ const DownloadIso = ({
                 }
               />
             </DetailList>
+          </StackItem>
+          <StackItem>
             <Alert
               variant="info"
               isInline
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx
index fc49a78509..f58c451b74 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Stack, StackItem } from '@patternfly/react-core';
 import {
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
@@ -43,41 +43,49 @@ const ClusterDetailStatusMessages = ({
     : '';
 
   return (
-    <>
+    <Stack hasGutter>
       {!isSingleClusterFeatureEnabled &&
         typeof inactiveDeletionHours === 'number' &&
         canDownloadKubeconfig(cluster.status) && (
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={
+                dateDifference > 0
+                  ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                    `deleted from Assisted Installer's service in ${dateDifference} days.`
+                  : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              }
+            />
+          </StackItem>
+        )}
+      {showAddHostsAlert && (
+        <StackItem>
           <Alert
             variant="info"
             isInline
+            data-testid="alert-add-hosts"
             title={
-              dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
-                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              <p>
+                {isClusterPlatformTypeVM(cluster)
+                  ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
+                  : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
+                <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
+                  console.redhat.com/openshift <ExternalLinkAltIcon />
+                </a>
+                .
+              </p>
             }
           />
-        )}
-      {showAddHostsAlert && (
-        <Alert
-          variant="info"
-          isInline
-          data-testid="alert-add-hosts"
-          title={
-            <p>
-              {isClusterPlatformTypeVM(cluster)
-                ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
-                : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
-              <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
-                console.redhat.com/openshift <ExternalLinkAltIcon />
-              </a>
-              .
-            </p>
-          }
-        />
+        </StackItem>
+      )}
+      {platformLink && (
+        <StackItem>
+          <PostInstallAlert link={platformLink} />
+        </StackItem>
       )}
-      {platformLink && <PostInstallAlert link={platformLink} />}
-    </>
+    </Stack>
   );
 };
 

From 1070eda1f79499c62a71a86c3bb1581e08fff4d6 Mon Sep 17 00:00:00 2001
From: jgyselov <jgyselov@redhat.com>
Date: Thu, 9 Oct 2025 14:06:28 +0200
Subject: [PATCH 2/2] Show both error and helper text under textarea fields

---
 .../components/ui/formik/TextAreaField.tsx      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx b/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx
index ff1580b84c..31d49b8b83 100644
--- a/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx
+++ b/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx
@@ -61,13 +61,22 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         <FormHelperText>
           <HelperText>
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              variant={'default'}
+              id={`${fieldId}-helper`}
               data-testid={`input-textarea-${fieldId}-helper-text`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {helperText}
             </HelperTextItem>
+            {errorMessage && (
+              <HelperTextItem
+                icon={<ExclamationCircleIcon />}
+                variant={'error'}
+                id={`${fieldId}-helper-error`}
+                data-testid={`input-textarea-${fieldId}-helper-text`}
+              >
+                {errorMessage}
+              </HelperTextItem>
+            )}
           </HelperText>
         </FormHelperText>
       )}