diff --git a/packages/common-components/src/TextInput/FormikTextInput.tsx b/packages/common-components/src/TextInput/FormikTextInput.tsx
index a454083a31..ee1ce8e62c 100644
--- a/packages/common-components/src/TextInput/FormikTextInput.tsx
+++ b/packages/common-components/src/TextInput/FormikTextInput.tsx
@@ -38,12 +38,7 @@ const FormikTextInput = React.forwardRef(
         name={field.name}
         value={field.value}
         placeholder={placeholder}
-        captionMessage={
-          <>
-            {captionMessage && captionMessage}
-            {meta.touched && meta.error && `${meta.error}`}
-          </>
-        }
+        captionMessage={meta.error ? `${meta.error}` : captionMessage ? captionMessage : null}
         state={meta.error ? "error" : undefined}
         onChange={helpers.setValue}
         autoFocus={autoFocus}
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx
index a38bde9f5e..ecb96f943c 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx
@@ -93,7 +93,8 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
         borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
         borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
         borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`
+        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`,
+        maxWidth: `${breakpoints.width("md")}px !important`
       }
     },
     renameHeader: {
@@ -140,8 +141,11 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
     },
     filename: {
       whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
       overflow: "hidden",
-      textOverflow: "ellipsis"
+      "&.editing": {
+        overflow: "visible"
+      }
     },
     dropdownIcon: {
       "& svg": {
@@ -427,7 +431,7 @@ const FileSystemItemRow: React.FC<IFileSystemItemRowProps> = ({
       <TableCell
         ref={preview}
         align="left"
-        className={classes.filename}
+        className={clsx(classes.filename, desktop && editing === cid && "editing")}
         onClick={() => {
           if (!editing) {
             onFolderOrFileClicks()
@@ -474,67 +478,70 @@ const FileSystemItemRow: React.FC<IFileSystemItemRowProps> = ({
             </Form>
           </Formik>
         ) : editing === cid && !desktop ? (
-          <CustomModal
-            className={classes.modalRoot}
-            injectedClass={{
-              inner: classes.modalInner
-            }}
-            closePosition="none"
-            active={editing === cid}
-            setActive={() => setEditing("")}
-          >
-            <Formik
-              initialValues={{
-                fileName: name
+          <>
+            <CustomModal
+              className={classes.modalRoot}
+              injectedClass={{
+                inner: classes.modalInner
               }}
-              validationSchema={RenameSchema}
-              onSubmit={(values) => {
-                handleRename &&
+              closePosition="none"
+              active={editing === cid}
+              setActive={() => setEditing("")}
+            >
+              <Formik
+                initialValues={{
+                  fileName: name
+                }}
+                validationSchema={RenameSchema}
+                onSubmit={(values) => {
+                  handleRename &&
                   handleRename(
                     `${currentPath}${name}`,
                     `${currentPath}${values.fileName}`
                   )
-                setEditing(undefined)
-              }}
-            >
-              <Form className={classes.renameModal}>
-                <Typography
-                  className={classes.renameHeader}
-                  component="p"
-                  variant="h5"
-                >
-                  <Trans>Rename File/Folder</Trans>
-                </Typography>
-                <FormikTextInput
-                  label="Name"
-                  className={classes.renameInput}
-                  name="fileName"
-                  placeholder={`Please enter a ${
-                    isFolder ? "folder" : "file"
-                  } name`}
-                  autoFocus={editing === cid}
-                />
-                <footer className={classes.renameFooter}>
-                  <Button
-                    onClick={() => setEditing("")}
-                    size="medium"
-                    className={classes.cancelButton}
-                    variant="outline"
-                    type="button"
-                  >
-                    <Trans>Cancel</Trans>
-                  </Button>
-                  <Button
-                    size="medium"
-                    type="submit"
-                    className={classes.okButton}
+                  setEditing(undefined)
+                }}
+              >
+                <Form className={classes.renameModal}>
+                  <Typography
+                    className={classes.renameHeader}
+                    component="p"
+                    variant="h5"
                   >
-                    <Trans>Update</Trans>
-                  </Button>
-                </footer>
-              </Form>
-            </Formik>
-          </CustomModal>
+                    <Trans>Rename File/Folder</Trans>
+                  </Typography>
+                  <FormikTextInput
+                    label="Name"
+                    className={classes.renameInput}
+                    name="fileName"
+                    placeholder={`Please enter a ${
+                      isFolder ? "folder" : "file"
+                    } name`}
+                    autoFocus={editing === cid}
+                  />
+                  <footer className={classes.renameFooter}>
+                    <Button
+                      onClick={() => setEditing("")}
+                      size="medium"
+                      className={classes.cancelButton}
+                      variant="outline"
+                      type="button"
+                    >
+                      <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                      size="medium"
+                      type="submit"
+                      className={classes.okButton}
+                    >
+                      <Trans>Update</Trans>
+                    </Button>
+                  </footer>
+                </Form>
+              </Formik>
+            </CustomModal>
+            <Typography>{name}</Typography>
+          </>
         ) : (
           <Typography>{name}</Typography>
         )}