apps/web: change blocks order for mobile

apps/web/Components/Calculation/Form/index.jsx

@@ -46,11 +46,11 @@ const ComponentWrapper = styled.div`
 
 function Form({ prune }) {
   return (
-    <Wrapper>
+    <Wrapper id="form">
       <Tabs type="card" tabBarGutter="5px">
         {formTabs
           .filter((tab) => !prune?.includes(tab.id))
-          .map(({ id, title, Component }) => (
+          .map(({ Component, id, title }) => (
             <Tabs.TabPane tab={title} key={id}>
               <ComponentWrapper>
                 <Component />

apps/web/Components/Calculation/Settings/index.jsx

@@ -28,7 +28,7 @@ export default function Settings() {
     : renderFormRows(config.paramsRows);
 
   return (
-    <Wrapper>
+    <Wrapper id="settings">
       {mainRows}
       {paramsRows}
     </Wrapper>

apps/web/Components/Layout/Page.jsx

@@ -1,13 +1,31 @@
-import { min } from '@/styles/mq';
-import styled from 'styled-components';
+import { max, min } from '@/styles/mq';
+import styled, { css } from 'styled-components';
 import { Box } from 'ui/grid';
 
+const order = css`
+  ${max('laptop-m')} {
+    #settings {
+      order: 1;
+    }
+
+    #form {
+      order: 2;
+    }
+
+    #output {
+      order: 3;
+    }
+  }
+`;
+
 export const Grid = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 10px;
 
-  ${min('laptop')} {
+  ${order}
+
+  ${min('laptop-m')} {
     display: grid;
     align-items: flex-start;
     grid-template-columns: 2fr 1fr;

apps/web/Components/Output/index.jsx

@@ -58,7 +58,7 @@ const Output = observer(() => {
   }, [$results.payments.length, hasErrors]);
 
   return (
-    <Wrapper>
+    <Wrapper id="output">
       <Tabs
         items={items}
         activeKey={activeKey}

apps/web/config/ui.js

@@ -1,5 +1,5 @@
 /* eslint-disable canonical/sort-keys */
-const threshold = 0;
+const threshold = 1;
 
 const screens = {
   tablet: 768,

apps/web/styles/mq.ts

@@ -1,8 +1,8 @@
 import { screens, threshold } from '@/config/ui';
 
 export function min(breakpoint: keyof typeof screens) {
-  return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
+  return `@media (min-width: calc(${screens[breakpoint]}px))`;
 }
 export function max(breakpoint: keyof typeof screens) {
-  return `@media (max-width: calc(${screens[breakpoint]}px))`;
+  return `@media (max-width: calc(${screens[breakpoint]}px - ${threshold}px))`;
 }