mobile fixes

src/components/atoms/Box.module.css

@@ -5,7 +5,13 @@
   border: 1px solid var(--border-color);
   box-shadow: 0 6px 17px 0 var(--box-shadow-color);
   overflow: hidden;
-  padding: var(--spacer);
+  padding: calc(var(--spacer) / 1.5);
+}
+
+@media (min-width: 40rem) {
+  .box {
+    padding: var(--spacer);
+  }
 }
 
 a.box:hover,

src/components/atoms/Container.module.css

@@ -2,11 +2,18 @@
   max-width: var(--break-point--large);
   margin-left: auto;
   margin-right: auto;
-  padding-left: calc(var(--spacer) / 1.2);
+  padding-left: calc(var(--spacer) / 3);
-  padding-right: calc(var(--spacer) / 1.2);
+  padding-right: calc(var(--spacer) / 3);
   width: 100%;
 }
 
+@media (min-width: 40rem) {
+  .container {
+    padding-left: calc(var(--spacer) / 1.2);
+    padding-right: calc(var(--spacer) / 1.2);
+  }
+}
+
 .container.narrow {
   max-width: 42rem;
 }

src/components/molecules/PageHeader.module.css

@@ -4,11 +4,17 @@
 }
 
 .title {
-  font-size: var(--font-size-h2);
+  font-size: var(--font-size-h3);
   margin-top: 0;
   margin-bottom: 0;
 }
 
+@media (min-width: 40rem) {
+  .title {
+    font-size: var(--font-size-h2);
+  }
+}
+
 .description {
   font-size: var(--font-size-large);
   margin-top: calc(var(--spacer) / 4);

src/components/molecules/UserPreferences/Currency.tsx

@@ -12,14 +12,14 @@ export default function Currency(): ReactElement {
       <Input
         name="currency"
         label="Currency"
-        help="Select your preferred currency."
+        help="Your conversion display currency."
         type="select"
         options={appConfig.currencies}
         value={currency}
         onChange={(e: ChangeEvent<HTMLSelectElement>) =>
           setCurrency(e.target.value)
         }
-        small
+        size="small"
       />
     </li>
   )

src/components/molecules/UserPreferences/Debug.tsx

@@ -15,7 +15,9 @@ export default function Debug(): ReactElement {
         defaultChecked={debug === true}
         onChange={() => setDebug(!debug)}
       />
-      <FormHelp>Show geeky information in some places.</FormHelp>
+      <FormHelp>
+        Show geeky information in some places, and in your console.
+      </FormHelp>
     </li>
   )
 }

src/components/molecules/UserPreferences/Theme.tsx

@@ -16,12 +16,12 @@ export default function Theme({
       <Input
         name="theme"
         label="Theme"
-        help="Defaults to your OS settings, select a theme to override."
+        help="Defaults to your OS setting, select a theme to override."
         type="select"
         options={options}
         value={value}
         onChange={() => darkMode.toggle()}
-        small
+        size="small"
       />
     </li>
   )

src/components/molecules/UserPreferences/index.module.css

@@ -36,7 +36,8 @@
 }
 
 .preferencesDetails {
-  padding: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+  max-width: 20rem;
 }
 
 .preferencesDetails li > div,

src/components/organisms/AssetActions/Compute.tsx

@@ -135,7 +135,7 @@ export default function Compute({
         name="algorithm"
         label="Select image to run the algorithm"
         placeholder=""
-        small
+        size="small"
         value={computeType}
         options={computeOptions.map((x) => x.name)}
         onChange={handleSelectChange}

src/components/organisms/AssetActions/Pool/TokenList.module.css

@@ -1,11 +1,18 @@
 .tokenlist {
   margin-left: -2rem;
   margin-right: -2rem;
-  padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
+  padding: calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
-    var(--spacer);
+    calc(var(--spacer) / 2) calc(var(--spacer) / 1.5);
   border-top: 1px solid var(--border-color);
 }
 
+@media (min-width: 40rem) {
+  .tokenlist {
+    padding-left: var(--spacer);
+    padding-right: var(--spacer);
+  }
+}
+
 .tokenlist.highlight {
   background: var(--background-highlight);
 }

src/components/organisms/AssetContent/Bookmark.module.css

@@ -15,7 +15,7 @@
   fill: var(--brand-grey-light);
   height: 40px;
   width: 40px;
-  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 4px 6px var(--box-shadow-color));
 }
 
 .bookmark:hover,

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx

@@ -25,7 +25,7 @@ const Default = ({
     name={name}
     postfix="%"
     readOnly
-    small
+    size="small"
   />
 )
 
@@ -51,7 +51,7 @@ export default function Fees({
           min="0.1"
           max="10"
           step="0.1"
-          small
+          size="small"
           {...field}
           additionalComponent={<Error meta={meta} />}
         />