From 1087ab3de61150752d407bfdc44a0628caaa6e27 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 25 Sep 2025 15:43:52 +0100
Subject: [PATCH] fix styling of long error message (#33465)

quick fix for the styling of one of the upload profile error message.

**before**

<img width="786" height="105" alt="image"
src="https://github.com/user-attachments/assets/b2d03eee-c01a-47c5-bf9c-dcd066f36cbe"
/>


**after**

<img width="792" height="112" alt="image"
src="https://github.com/user-attachments/assets/0e33b70a-0e1c-49ba-9326-486d8735ea38"
/>
---
 .../OSSettings/cards/CustomSettings/_styles.scss             | 5 +++++
 .../CustomSettings/components/ProfileUploader/helpers.tsx    | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/_styles.scss b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/_styles.scss
index a59c4fa641..eb5f1e9aef 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/_styles.scss
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/_styles.scss
@@ -32,3 +32,8 @@
     max-width: none;
   }
 }
+
+// this is used to format the long error message when uploading invalid keys
+.upload-profile-invalid-keys-error {
+  display: flex;
+}
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx
index 84d1922408..f1e10021a6 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/helpers.tsx
@@ -129,7 +129,7 @@ export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
 
   if (apiReason.includes("Keys in declaration (DDM) profile")) {
     return (
-      <>
+      <div className="upload-profile-invalid-keys-error">
         <span>
           Couldn&apos;t add. Keys in declaration (DDM) profile must contain only
           letters and start with a uppercase letter. Keys in Android profile
@@ -141,7 +141,7 @@ export const getErrorMessage = (err: AxiosResponse<IApiError>) => {
           variant="flash-message-link"
           url="https://fleetdm.com/learn-more-about/how-to-craft-android-profile"
         />
-      </>
+      </div>
     );
   }