From 12047a9324dfb534ebfc9f246fa667c15ea364f4 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 +++--
 .../pages/rgdp/rgdpForm/FileField/FileField.component.tsx    | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx b/packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx
index 2391fd857a71..19a3e67beb77 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) => {
           if (!disabled) deleteFile(e, file);
diff --git a/packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/FileField/FileField.component.tsx b/packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/FileField/FileField.component.tsx
index 0d9e76074c91..c3aefdda5d63 100644
--- a/packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/FileField/FileField.component.tsx
+++ b/packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/FileField/FileField.component.tsx
@@ -53,7 +53,7 @@ export const FileField: FunctionComponent<Props> = ({
             },
           },
         }}
-        render={({ field: { onChange, value, name: _name } }) => (
+        render={({ field: { onChange, value, name: _name, disabled } }) => (
           <FileInputContainer
             id={`field_id_${_name}`}
             accept={accept}
@@ -62,6 +62,7 @@ export const FileField: FunctionComponent<Props> = ({
             onChange={(e) => onChange(e.files)}
             maxSize={maxSize}
             multiple={multiple}
+            disabled={disabled}
           >
             <label className="block mb-2">
               <OsdsText