fix(procedures): fix filename overflow for mobile (#13712)

ref: MANAGER-15339 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Oct 28, 2024 · 12047a9 · 12047a9
1 parent 506ab67
commit 12047a9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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