feat: Moving form and result to two cols

src/components/Form/Form.tsx

@@ -11,6 +11,7 @@ import useNear from "../../hooks/useNear"
 import useWindowDimensions from '../../hooks/useWindowDimensions'
 import { WithWBRs } from '..'
 import css from "./form.module.css"
+import './form.scss';
 
 const Textarea = (props: WidgetProps) => (
   <TextareaWidget {...props} options={{rows: 1, ...props.options}} />
@@ -64,7 +65,7 @@ const Display: React.FC<React.PropsWithChildren<{
 
   return (
     <>
-      <h1>{result !== undefined ? "Result" : "Error"}</h1>
+      <h1 className="mt-0">{result !== undefined ? "Result" : "Error"}</h1>
       {tx && (
         <p>
           View full transaction details on{' '}
@@ -271,29 +272,28 @@ export function Form() {
 
   if (!method) {
     return (
-      <>
+      <div className="container">
         <h1 style={{ margin: 0 }}>
           <WithWBRs word={contract} breakOn="." />
         </h1>
         <p>
           Inspect <strong><WithWBRs word={contract} breakOn="." /></strong> using a schema built with <a href="https://raen.dev/admin">RAEN</a> and stored on <a href="https://near.org">NEAR</a>. Select a method from {isMobile ? 'the menu above' : 'the sidebar'} to get started.
         </p>
-      </>
+      </div>
     )
   }
 
   const hasInputs = def?.contractMethod === 'change' ||
     Object.keys(def?.properties?.args?.properties ?? {}).length > 0
-
   return (
-    <>
-      <h1 style={{ margin: 0 }}>
+    <div className={`container ${hasInputs && result && 'large'}`}>
+      <h1>
         <WithWBRs word={snake(method)} />
       </h1>
       {whyForbidden && <p className="errorHint">Forbidden: {whyForbidden}</p>}
       {schema && (
-        <>
-          <FormComponent
+        <div className={`inner-form-wrapper ${hasInputs && result ? 'form-and-result' : ''}`}>
+          {hasInputs && <FormComponent
             className={css.form}
             key={method /* re-initialize form when method changes */}
             disabled={!!whyForbidden}
@@ -312,15 +312,15 @@ export function Form() {
             formData={formData}
             onChange={setFormData}
             onSubmit={onSubmit}
-          />
-          <div style={{ margin: 'var(--spacing-l) 0' }}>
+          />}
+          {result && <div className={`${!hasInputs ? 'results-only' : ''} ${hasInputs && result ? 'input-and-results' : ''}`}>
             {loading
               ? <div className="loader" />
               : <Display result={result} error={error} tx={tx} logs={logs} />
             }
-          </div>
-        </>
+          </div>}
+        </div>
       )}
-    </>
+    </div>
   );
 }

src/components/Form/form.scss

@@ -0,0 +1,25 @@
+.inner-form-wrapper {
+  display: flex;
+  justify-content: center;
+  &.form-and-result {
+    justify-content: space-between;
+    form {
+      width: 45%;
+    }
+  }
+
+  .input-and-results {
+    margin-left: 40px;
+    flex: 1;
+  }
+
+  .results-only {
+    width: 100%;
+  }
+
+  > div {
+    h1 {
+      margin-top: 0px;
+    }
+  }
+}

src/components/Layout/Layout.tsx

@@ -77,7 +77,6 @@ export const Layout: React.FC<React.PropsWithChildren<unknown>> = ({ children })
           </div>
         )}
         <div
-          className="container"
           style={{ marginTop: 'var(--spacing-l)' }}
           id="mainContent" // referenced by links in `Methods/Method.tsx`
           aria-live="polite"

src/styles/global.scss

@@ -39,6 +39,7 @@ $red: #fc5b5b;
   --spacing-xl: calc(var(--base-spacing) * 4);
   --spacing-xxl: calc(var(--base-spacing) * 5);
   --max-width: calc(35 * var(--spacing-m));
+  --max-width-wide: calc(85 * var(--spacing-m));
 
   /* Border Radius */
   --br-base: 10px;
@@ -366,6 +367,10 @@ textarea::selection {
   max-width: var(--max-width);
   padding-left: var(--spacing-l);
   padding-right: var(--spacing-l);
+  transition: 1s ease all;
+  &.large {
+    max-width: var(--max-width-wide);
+  }
 }
 
 .loader {
@@ -473,4 +478,4 @@ fieldset#root > .form-group + .form-group {
   top:0;
   width:100%;
   height:100%;
-}
+}