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}} />
@@ -284,16 +285,15 @@ export function Form() {
 
   const hasInputs = def?.contractMethod === 'change' ||
     Object.keys(def?.properties?.args?.properties ?? {}).length > 0
-
   return (
     <>
-      <h1 style={{ margin: 0 }}>
+      <h1 style={!result || !hasInputs ? { marginLeft: 'auto', marginRight: 'auto', width: '500px' } : { margin: 0 }}>
         <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,14 +312,14 @@ 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>
       )}
     </>
   );

src/components/Form/form.scss

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

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Contract, Home } from "./components"
-import { HashRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import reportWebVitals from "./reportWebVitals";
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
 import "./styles/global.scss"
@@ -13,13 +13,13 @@ const root = createRoot(container!)
 root.render(
   <React.StrictMode>
     <TooltipProvider delayDuration={0}>
-      <HashRouter>
+      <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/:contract" element={<Contract />} />
           <Route path="/:contract/:method" element={<Contract />} />
         </Routes>
-      </HashRouter>
+      </BrowserRouter>
     </TooltipProvider>
   </React.StrictMode>
 );

src/styles/global.scss

@@ -38,7 +38,7 @@ $red: #fc5b5b;
   --spacing-l: calc(var(--base-spacing) * 3);
   --spacing-xl: calc(var(--base-spacing) * 4);
   --spacing-xxl: calc(var(--base-spacing) * 5);
-  --max-width: calc(35 * var(--spacing-m));
+  --max-width: calc(80 * var(--spacing-m));
 
   /* Border Radius */
   --br-base: 10px;