From 10eeae09273dc20f24f9929567e04a4d0f6e0e34 Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Sat, 3 Oct 2020 21:22:37 +0300
Subject: [PATCH] Fix text overflows through out the front end  (#2406)

---
 resources/scripts/components/elements/Modal.tsx               | 2 ++
 resources/scripts/components/server/backups/BackupRow.tsx     | 4 +++-
 resources/scripts/components/server/files/FileObjectRow.tsx   | 2 +-
 .../scripts/components/server/files/NewDirectoryButton.tsx    | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 10401e9ca..2980fecd9 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -35,6 +35,8 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
         margin-top: 20%;
         ${breakpoint('md')`margin-top: 10%`};
     `};
+
+    margin-bottom: 5%;
     
     & > .close-icon {
         ${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 0a45c7ca9..fbbb849f9 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/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>
                     }
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 53005653b..43416eb4c 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/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 &&
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index e1f92e0e7..2be673db9 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/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`}>