Fix text overflows through out the front end (#2406)

resources/scripts/components/server/backups/BackupRow.tsx

@@ -55,7 +55,9 @@ export default ({ backup, className }: Props) => {
                         Failed
                     </span>
                     }
-                    {backup.name}
+                    <div css={tw`break-all`}>
+                        {backup.name}
+                    </div>
                     {(backup.completedAt && backup.isSuccessful) &&
                     <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
                     }

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
                     <FontAwesomeIcon icon={faFolder}/>
                 }
             </div>
-            <div css={tw`flex-1`}>
+            <div css={tw`flex-1 break-all`}>
                 {file.name}
             </div>
             {file.isFile &&

resources/scripts/components/server/files/NewDirectoryButton.tsx

@@ -88,7 +88,7 @@ export default ({ className }: WithClassname) => {
                                 name={'directoryName'}
                                 label={'Directory Name'}
                             />
-                            <p css={tw`text-xs mt-2 text-neutral-400`}>
+                            <p css={tw`text-xs mt-2 text-neutral-400 break-all`}>
                                 <span css={tw`text-neutral-200`}>This directory will be created as</span>
                                 &nbsp;/home/container/
                                 <span css={tw`text-cyan-200`}>