From 98fb4e67799283e74fcaee7c72667a11fb593734 Mon Sep 17 00:00:00 2001
From: Omar <omaralkabous@gmail.com>
Date: Tue, 22 Oct 2024 10:33:48 +0200
Subject: [PATCH] fix(procedures): fix filename overflow for mobile (#13712)

ref: MANAGER-15339

Signed-off-by: Omar ALKABOUSS MOUSSANA <omar.alkabouss-moussana.ext@corp.ovh.com>
---
 .../src/components/FileInput/FileInputListItem.tsx           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx b/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx
index 42841245ecb5..ba5df7cc1de0 100644
--- a/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx
+++ b/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx
@@ -37,6 +37,7 @@ export const FileInputListItem: FunctionComponent<FileInputListItemProps> = ({
     >
       <OsdsIcon
         name={ODS_ICON_NAME.FILE}
+        className="flex-shrink-0"
         color={
           hasError
             ? ODS_THEME_COLOR_INTENT.error
@@ -45,7 +46,7 @@ export const FileInputListItem: FunctionComponent<FileInputListItemProps> = ({
         size={ODS_ICON_SIZE.sm}
       />
       <OsdsText
-        className="text-sm"
+        className="text-sm break-all"
         color={
           hasError
             ? ODS_THEME_COLOR_INTENT.error
@@ -67,7 +68,7 @@ export const FileInputListItem: FunctionComponent<FileInputListItemProps> = ({
             ? ODS_THEME_COLOR_INTENT.error
             : ODS_THEME_COLOR_INTENT.primary
         }
-        className="ml-auto cursor-pointer"
+        className="ml-auto cursor-pointer flex-shrink-0"
         size={ODS_ICON_SIZE.sm}
         onClick={(e) => deleteFile(e, file)}
       />