From 0fa503f9237a4ba116e8172034f6727195a7ee04 Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Mon, 5 Oct 2020 11:36:47 +0300
Subject: [PATCH 1/6] Fixed phantom shadow when opening modal window

---
 resources/scripts/components/elements/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 2980fecd9..68d6493de 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -36,7 +36,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
         ${breakpoint('md')`margin-top: 10%`};
     `};
 
-    margin-bottom: 5%;
+    margin-bottom: auto;
     
     & > .close-icon {
         ${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};

From 62e111657c4f4921a4829ff5299c656bc9c2d84e Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Mon, 5 Oct 2020 11:53:11 +0300
Subject: [PATCH 2/6] Fixed a bug with an incorrect size modal

---
 .../scripts/components/dashboard/forms/SetupTwoFactorModal.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx b/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
index b9458bf39..619067486 100644
--- a/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
+++ b/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
@@ -69,6 +69,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
             {({ isSubmitting }) => (
                 <Modal
                     {...props}
+                    top={false}
                     onDismissed={dismiss}
                     dismissable={!isSubmitting}
                     showSpinnerOverlay={loading || isSubmitting}

From ec313a7362322c521359bdc3e92781c446420cd6 Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Mon, 5 Oct 2020 12:36:03 +0300
Subject: [PATCH 3/6] Fixed description for API keys

---
 resources/scripts/components/dashboard/AccountApiContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index 33f0eb561..26533878c 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -100,7 +100,7 @@ export default () => {
                                 >
                                     <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
                                     <div css={tw`ml-4 flex-1`}>
-                                        <p css={tw`text-sm`}>{key.description}</p>
+                                        <p css={tw`text-sm break-all`}>{key.description}</p>
                                         <p css={tw`text-2xs text-neutral-300 uppercase`}>
                                             Last used:&nbsp;
                                             {key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}

From 1e3f3fb05365624c03dd0341290078c772ad466d Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Fri, 9 Oct 2020 12:15:23 +0300
Subject: [PATCH 4/6] Fixed incorrect button appearance

---
 resources/scripts/components/auth/ForgotPasswordContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
index 82bd5e5ff..f82b76e20 100644
--- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
@@ -94,7 +94,6 @@ export default () => {
                     }
                     <div css={tw`mt-6 text-center`}>
                         <Link
-                            type={'button'}
                             to={'/auth/login'}
                             css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                         >

From c6d6221711aa4f7f8ce3966a1f39de253d5d91b1 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 11 Oct 2020 12:29:00 -0700
Subject: [PATCH 5/6] Correctly fix the UI for API keys

---
 .../dashboard/AccountApiContainer.tsx         | 34 +++++--------------
 1 file changed, 8 insertions(+), 26 deletions(-)

diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index 26533878c..d739ea601 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -14,26 +14,8 @@ import { httpErrorToHuman } from '@/api/http';
 import { format } from 'date-fns';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
-import { breakpoint } from '@/theme';
-import styled from 'styled-components/macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 
-const Container = styled.div`
-    ${tw`flex flex-wrap my-10`};
-
-    & > div {
-        ${tw`w-full`};
-
-        ${breakpoint('md')`
-            width: calc(50% - 1rem);
-        `}
-
-        ${breakpoint('xl')`
-            ${tw`w-auto flex-1`};
-        `}
-    }
-`;
-
 export default () => {
     const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
     const [ keys, setKeys ] = useState<ApiKey[]>([]);
@@ -67,12 +49,12 @@ export default () => {
 
     return (
         <PageContentBlock title={'Account API'}>
-            <FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
-            <Container>
-                <ContentBox title={'Create API Key'}>
+            <FlashMessageRender byKey={'account'}/>
+            <div css={tw`md:flex flex-no-wrap my-10`}>
+                <ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
                     <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
                 </ContentBox>
-                <ContentBox title={'API Keys'} css={tw`mt-8 md:mt-0 md:ml-8`}>
+                <ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
                     <SpinnerOverlay visible={loading}/>
                     <ConfirmationModal
                         visible={!!deleteIdentifier}
@@ -99,14 +81,14 @@ export default () => {
                                     css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
                                 >
                                     <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
-                                    <div css={tw`ml-4 flex-1`}>
-                                        <p css={tw`text-sm break-all`}>{key.description}</p>
+                                    <div css={tw`ml-4 flex-1 overflow-hidden`}>
+                                        <p css={tw`text-sm break-words`}>{key.description}</p>
                                         <p css={tw`text-2xs text-neutral-300 uppercase`}>
                                             Last used:&nbsp;
                                             {key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
                                         </p>
                                     </div>
-                                    <p css={tw`text-sm ml-4`}>
+                                    <p css={tw`text-sm ml-4 hidden md:block`}>
                                         <code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
                                             {key.identifier}
                                         </code>
@@ -124,7 +106,7 @@ export default () => {
                             ))
                     }
                 </ContentBox>
-            </Container>
+            </div>
         </PageContentBlock>
     );
 };

From 2f5e080074206ffe6538f973d91cde1922d4cbf1 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 11 Oct 2020 12:34:48 -0700
Subject: [PATCH 6/6] Remove unnecessary break-all

---
 resources/scripts/components/server/backups/BackupRow.tsx     | 2 +-
 resources/scripts/components/server/files/FileObjectRow.tsx   | 2 +-
 resources/scripts/components/server/network/AllocationRow.tsx | 2 +-
 resources/scripts/components/server/users/UserRow.tsx         | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index fd6874cb6..426c543da 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -56,7 +56,7 @@ export default ({ backup, className }: Props) => {
                             Failed
                         </span>
                         }
-                        <p css={tw`break-all truncate`}>
+                        <p css={tw`break-words truncate`}>
                             {backup.name}
                         </p>
                         {(backup.completedAt && backup.isSuccessful) &&
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index b27af496e..26c37ed21 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 break-all truncate`}>
+            <div css={tw`flex-1 truncate`}>
                 {file.name}
             </div>
             {file.isFile &&
diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx
index 69edb5146..27c2fba92 100644
--- a/resources/scripts/components/server/network/AllocationRow.tsx
+++ b/resources/scripts/components/server/network/AllocationRow.tsx
@@ -15,7 +15,7 @@ import setServerAllocationNotes from '@/api/server/network/setServerAllocationNo
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 
-const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block break-all`}`;
+const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 interface Props {
diff --git a/resources/scripts/components/server/users/UserRow.tsx b/resources/scripts/components/server/users/UserRow.tsx
index a7d54fb4e..237621660 100644
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@@ -30,8 +30,8 @@ export default ({ subuser }: Props) => {
             <div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
                 <img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
             </div>
-            <div css={tw`ml-4 flex-1`}>
-                <p css={tw`text-sm break-all`}>{subuser.email}</p>
+            <div css={tw`ml-4 flex-1 overflow-hidden`}>
+                <p css={tw`text-sm truncate`}>{subuser.email}</p>
             </div>
             <div css={tw`ml-4`}>
                 <p css={tw`font-medium text-center`}>