mobile fixes

src/features/Web3/components/Conversion/Conversion.module.css

@@ -1,12 +1,19 @@
 .conversion {
   font-size: var(--font-size-mini);
   color: var(--text-color-light);
-  text-align: left;
+  text-align: center;
-  margin-top: 0;
+  margin-top: calc(var(--spacer) / 6);
-  margin-left: calc(var(--spacer) * 2.4);
   animation: fadeIn 0.5s 0.8s ease-out backwards;
 }
 
+@media screen and (min-width: 40rem) {
+  .conversion {
+    text-align: left;
+    margin-top: 0;
+    margin-left: calc(var(--spacer) * 2.4);
+  }
+}
+
 .conversion span {
   margin-left: calc(var(--spacer) / 2);
 }

src/features/Web3/components/Input/InputGroup.module.css

@@ -4,11 +4,26 @@
   animation: fadeIn 0.8s ease-out backwards;
   margin-top: calc(var(--spacer) / 3);
   display: flex;
+  flex-direction: column;
   min-height: 54px;
 }
 
+@media (min-width: 40rem) {
+  .inputGroup {
+    flex-direction: row;
+  }
+}
+
+.inputWrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .token {
   width: 80px;
+  height: 100%;
+  min-height: 54px;
   background: var(--box-background-color);
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
@@ -43,10 +58,13 @@
 }
 
 .submit {
-  width: 100%;
+  width: calc(100% - calc(var(--spacer) / 2) - 2px);
+  max-width: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-color: var(--link-color);
+  padding-left: calc(var(--spacer) / 4);
+  padding-right: calc(var(--spacer) / 4);
 }
 
 @media (min-width: 40rem) {

src/features/Web3/components/Input/InputGroup.tsx

@@ -16,18 +16,21 @@ export function InputGroup({
   return (
     <>
       <div className={styles.inputGroup}>
-        <div className={styles.token}>
+        <div className={styles.inputWrap}>
-          <TokenSelect />
+          <div className={styles.token}>
+            <TokenSelect />
+          </div>
+          <Input
+            type="text"
+            inputMode="decimal"
+            pattern="[0-9.]*"
+            value={amount}
+            placeholder="0.00"
+            onChange={(e) => setAmount(e.target.value)}
+            className={styles.inputInput}
+          />
         </div>
-        <Input
+
-          type="text"
-          inputMode="decimal"
-          pattern="[0-9.]*"
-          value={amount}
-          placeholder="0.00"
-          onChange={(e) => setAmount(e.target.value)}
-          className={styles.inputInput}
-        />
         <button
           className={`${styles.submit} btn btn-primary`}
           disabled={isDisabled || !amount}

src/features/Web3/components/TokenSelect/TokenSelect.tsx

@@ -38,6 +38,7 @@ export function TokenSelect() {
         className="SelectTrigger"
         disabled={isLoading}
         aria-label="Token"
+        placeholder="..."
       >
         {isLoading ? <TokenLoading /> : <Select.Value />}
         <Select.Icon>