ui(admin): tweaks to spacing

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>

resources/scripts/components/admin/Sidebar.tsx

@@ -61,11 +61,11 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>`
     }
 
     ${Wrapper} {
-        ${tw`px-5`};
+      ${tw`px-5`};
 
-        & > a {
+      & > a {
-            ${tw`justify-center px-0`};
+        ${tw`justify-center px-0`};
-        }
+      }
     }
 
     & > a {

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}/>
 

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`grid grid-cols-1 gap-y-6`}>
-                            <div css={tw`mb-6 lg:mb-10`}>
+                            <BaseSettingsBox/>
-                                <BaseSettingsBox/>
+                            <ServerFeatureContainer/>
-                            </div>
-                            <div css={tw`mb-6 lg:mb-10`}>
-                                <ServerFeatureContainer/>
-                            </div>
                             <ServerAllocationsContainer server={server}/>
                         </div>
+
                         <div css={tw`flex flex-col`}>
-                            <ServerResourceContainer css={tw`mb-6`}/>
+                            <ServerResourceContainer/>
-                            <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
+
+                            <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}

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`};
+        ${tw`mb-6 sm:mb-0 sm:w-full sm:flex sm:flex-col`};
-
-        &: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`};
-        }
     }
 `;