From 6814811a19fad14b7051f14ebf274c4dc69d2b1d Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sun, 3 Oct 2021 18:26:44 -0600
Subject: [PATCH] ui(admin): tweaks to spacing

---
 resources/scripts/components/admin/AdminBox.tsx  |  8 ++++----
 resources/scripts/components/admin/Sidebar.tsx   |  8 ++++----
 .../admin/nests/eggs/EggInstallContainer.tsx     |  2 +-
 .../admin/servers/ServerSettingsContainer.tsx    | 16 +++++++---------
 resources/scripts/components/elements/Field.tsx  | 16 ++--------------
 5 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/resources/scripts/components/admin/AdminBox.tsx b/resources/scripts/components/admin/AdminBox.tsx
index 847fc7076..da0543b7e 100644
--- a/resources/scripts/components/admin/AdminBox.tsx
+++ b/resources/scripts/components/admin/AdminBox.tsx
@@ -9,15 +9,15 @@ interface Props {
     isLoading?: boolean;
     title: string | React.ReactNode;
     className?: string;
-    padding?: boolean;
+    noPadding?: boolean;
     children: React.ReactNode;
     button?: React.ReactNode;
 }
 
-const AdminBox = ({ icon, title, className, isLoading, children, button }: Props) => (
+const AdminBox = ({ icon, title, className, isLoading, children, button, noPadding }: Props) => (
     <div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}>
         <SpinnerOverlay visible={isLoading || false}/>
-        <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 lg:px-6 py-3 lg:py-4 border-b border-black`}>
+        <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 xl:px-5 py-3 border-b border-black`}>
             {typeof title === 'string' ?
                 <p css={tw`text-sm uppercase`}>
                     {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
@@ -27,7 +27,7 @@ const AdminBox = ({ icon, title, className, isLoading, children, button }: Props
             }
             {button}
         </div>
-        <div css={tw`p-4 lg:p-6`}>
+        <div css={[ !noPadding && tw`px-4 xl:px-5 py-5` ]}>
             {children}
         </div>
     </div>
diff --git a/resources/scripts/components/admin/Sidebar.tsx b/resources/scripts/components/admin/Sidebar.tsx
index b1efeb578..b5ab0a047 100644
--- a/resources/scripts/components/admin/Sidebar.tsx
+++ b/resources/scripts/components/admin/Sidebar.tsx
@@ -61,11 +61,11 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>`
     }
 
     ${Wrapper} {
-        ${tw`px-5`};
+      ${tw`px-5`};
 
-        & > a {
-            ${tw`justify-center px-0`};
-        }
+      & > a {
+        ${tw`justify-center px-0`};
+      }
     }
 
     & > a {
diff --git a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx
index 878f682a7..1ea32071b 100644
--- a/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx
@@ -50,7 +50,7 @@ export default function EggInstallContainer ({ egg }: { egg: Egg }) {
             }}
         >
             {({ isSubmitting, isValid }) => (
-                <AdminBox icon={faScroll} title={'Install Script'} padding={false}>
+                <AdminBox icon={faScroll} title={'Install Script'} noPadding>
                     <div css={tw`relative pb-4`}>
                         <SpinnerOverlay visible={isSubmitting}/>
 
diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
index bc8d9ce4f..3da8115c2 100644
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@@ -257,18 +257,16 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
             {({ isSubmitting, isValid }) => (
                 <Form>
                     <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
-                        <div css={tw`flex flex-col`}>
-                            <div css={tw`mb-6 lg:mb-10`}>
-                                <BaseSettingsBox/>
-                            </div>
-                            <div css={tw`mb-6 lg:mb-10`}>
-                                <ServerFeatureContainer/>
-                            </div>
+                        <div css={tw`grid grid-cols-1 gap-y-6`}>
+                            <BaseSettingsBox/>
+                            <ServerFeatureContainer/>
                             <ServerAllocationsContainer server={server}/>
                         </div>
+
                         <div css={tw`flex flex-col`}>
-                            <ServerResourceContainer css={tw`mb-6`}/>
-                            <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
+                            <ServerResourceContainer/>
+
+                            <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mt-6`}>
                                 <div css={tw`flex flex-row`}>
                                     <ServerDeleteButton
                                         serverId={server?.id}
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index 6d35e6b89..67b8c894b 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/resources/scripts/components/elements/Field.tsx
@@ -77,21 +77,9 @@ export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaProps>(
 TextareaField.displayName = 'TextareaField';
 
 export const FieldRow = styled.div`
-    ${tw`mb-6 md:w-full md:flex md:flex-row`};
+    ${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 mb-6`};
 
     & > div {
-        ${tw`md:w-full md:flex md:flex-col mb-6 md:mb-0`};
-
-        &:first-of-type {
-            ${tw`md:mr-3`};
-        }
-
-        &:not(:first-of-type):not(:last-of-type) {
-            ${tw`md:mx-3`};
-        }
-
-        &:last-of-type {
-            ${tw`md:ml-3`};
-        }
+        ${tw`mb-6 sm:mb-0 sm:w-full sm:flex sm:flex-col`};
     }
 `;