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

ref: MANAGER-15339 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Oct 22, 2024 · 98fb4e6 · 98fb4e6
1 parent f2554dc
commit 98fb4e6
Showing 1 changed file with 3 additions and 2 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) => deleteFile(e, file)}
       />