From abd33c23846b0dbdddd61e37e9b7d033a1723118 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sun, 10 Jan 2021 11:40:30 -0700
Subject: [PATCH] admin(ui): make database and mount edit pages more responsive

---
 .../admin/databases/DatabaseEditContainer.tsx | 12 +++----
 .../admin/mounts/MountEditContainer.tsx       | 32 ++++++++++---------
 resources/scripts/routers/AdminRouter.tsx     |  2 +-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx b/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx
index c4092b0a6..8cdfaf04b 100644
--- a/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx
+++ b/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx
@@ -98,8 +98,8 @@ const EditInformationContainer = () => {
                                     />
                                 </div>
 
-                                <div css={tw`w-full flex flex-row mt-6`}>
-                                    <div css={tw`w-full flex flex-col mr-4`}>
+                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
                                         <Field
                                             id={'host'}
                                             name={'host'}
@@ -108,7 +108,7 @@ const EditInformationContainer = () => {
                                         />
                                     </div>
 
-                                    <div css={tw`w-full flex flex-col ml-4`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
                                         <Field
                                             id={'port'}
                                             name={'port'}
@@ -118,8 +118,8 @@ const EditInformationContainer = () => {
                                     </div>
                                 </div>
 
-                                <div css={tw`w-full flex flex-row mt-6`}>
-                                    <div css={tw`w-full flex flex-col mr-4`}>
+                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
                                         <Field
                                             id={'username'}
                                             name={'username'}
@@ -128,7 +128,7 @@ const EditInformationContainer = () => {
                                         />
                                     </div>
 
-                                    <div css={tw`w-full flex flex-col ml-4`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
                                         <Field
                                             id={'password'}
                                             name={'password'}
diff --git a/resources/scripts/components/admin/mounts/MountEditContainer.tsx b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
index d2b39cd66..fbf90efe7 100644
--- a/resources/scripts/components/admin/mounts/MountEditContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
@@ -110,22 +110,24 @@ const EditInformationContainer = () => {
                                     />
                                 </div>
 
-                                <div css={tw`mt-6`}>
-                                    <Field
-                                        id={'source'}
-                                        name={'source'}
-                                        label={'Source'}
-                                        type={'text'}
-                                    />
-                                </div>
+                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                        <Field
+                                            id={'source'}
+                                            name={'source'}
+                                            label={'Source'}
+                                            type={'text'}
+                                        />
+                                    </div>
 
-                                <div css={tw`mt-6`}>
-                                    <Field
-                                        id={'target'}
-                                        name={'target'}
-                                        label={'Target'}
-                                        type={'text'}
-                                    />
+                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                        <Field
+                                            id={'target'}
+                                            name={'target'}
+                                            label={'Target'}
+                                            type={'text'}
+                                        />
+                                    </div>
                                 </div>
 
                                 <div css={tw`w-full flex flex-row items-center mt-6`}>
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index 325560760..fd44470f9 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/resources/scripts/routers/AdminRouter.tsx
@@ -200,7 +200,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
             </div>
 
             <Container collapsed={collapsed}>
-                <div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 py-12`} style={{ maxWidth: '86rem' }}>
+                <div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 py-6 md:py-12`} style={{ maxWidth: '86rem' }}>
                     {/* <TransitionRouter> */}
                     <Switch location={location}>
                         <Route path={`${match.path}`} component={OverviewContainer} exact/>