fix: improve chart layout flow on Liquidity page (#339)

* feat: improve wrapping behavior for screen sizes for Liquidity page:

    - chart is forced to a smaller size than expected at 992px width
    - layout should flow on breakpoint, not a little before or after

* refactor: abstract out confirm button so it will always be the same:

    - across both screen sizes

src/components/LiquiditySelector/LiquiditySelector.scss

@@ -3,11 +3,6 @@
   flex: 1;
   position: relative;
   overflow: hidden;
-  // together with chart-zoom-controls allow for a min screen width of 375px
-  // (the smallest non-deprecated iPhone screen size)
-  // note: calculated with HTML meta viewport tag of:
-  //       content="width=540, user-scalable=no, minimum-scale=0.5"
-  min-width: 376px;
 }
 
 .chart-liquidity {

src/pages/Pool/Pool.tsx

@@ -647,6 +647,19 @@ function Pool() {
     'all'
   );
 
+  const confirmButton = (
+    <input
+      className="button-primary text-medium mt-4 p-3"
+      type="submit"
+      disabled={
+        (isValueAZero && isValueBZero) ||
+        !hasSufficientFundsA ||
+        !hasSufficientFundsB
+      }
+      value="Confirm"
+    />
+  );
+
   if (!tokenA || !tokenB || !valuesConfirmed) {
     return (
       <form
@@ -751,7 +764,7 @@ function Pool() {
             <div className="col flex-centered ml-auto">Transaction Details</div>
           </div>
           <hr className="mt-3 mb-4" />
-          <div className="flex row flow-wrap flow-nowrap-lg">
+          <div className="flex col row-lg gapx-lg">
             <div className="flex col col--left">
               <div className="chart-header row my-4">
                 <TokenPairLogos
@@ -834,16 +847,7 @@ function Pool() {
                   />
                 </div>
               </div>
-              <input
-                className="button-primary text-medium mt-4 p-3"
-                type="submit"
-                disabled={
-                  (isValueAZero && isValueBZero) ||
-                  !hasSufficientFundsA ||
-                  !hasSufficientFundsB
-                }
-                value="Confirm"
-              />
+              <div className="col-lg">{confirmButton}</div>
             </div>
             <div className="flex col col--right">
               <div className="chart-header row flow-wrap my-4">
@@ -1028,6 +1032,7 @@ function Pool() {
                 </div>
               )}
             </div>
+            <div className="col pt-lg col-lg-hide">{confirmButton}</div>
           </div>
         </div>
       </div>

src/styles/globals.scss

@@ -75,6 +75,39 @@ a {
 .col {
   flex-direction: column;
 }
+@media (min-width: 576px) {
+  .row-sm {
+    flex-direction: row;
+  }
+  .col-sm {
+    flex-direction: column;
+  }
+}
+@media (min-width: 768px) {
+  .row-md {
+    flex-direction: row;
+  }
+  .col-md {
+    flex-direction: column;
+  }
+}
+@media (min-width: 992px) {
+  .row-lg {
+    flex-direction: row;
+  }
+  .col-lg {
+    flex-direction: column;
+  }
+}
+@media (min-width: 1200px) {
+  .row-xl {
+    flex-direction: row;
+  }
+  .col-xl {
+    flex-direction: column;
+  }
+}
+
 .flex {
   flex: 1 1 0;
 }