From 78940252137ecf51feeab91b5ec37735dced991e Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Fri, 4 Nov 2022 17:46:02 +0100
Subject: [PATCH] ui(orderbook): improve mobile view

---
 src/components/Orderbook.module.css | 19 ++++++++++---------
 src/components/Orderbook.tsx        | 11 +++++------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Orderbook.module.css b/src/components/Orderbook.module.css
index 551829aad..c56fb9790 100644
--- a/src/components/Orderbook.module.css
+++ b/src/components/Orderbook.module.css
@@ -6,38 +6,39 @@
 .overlayContainer .orderbookContainer {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 0.5rem;
   background-color: var(--bs-body-bg);
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   .overlayContainer .orderbookContainer {
+    gap: 1.5rem;
     padding: 2rem;
     border-radius: 0.5rem;
   }
 }
 
-.overlayContainer .orderbookContainer > .titleBar {
+.overlayContainer .orderbookContainer .titleBar {
   min-height: 3.6rem;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 0 0 0.8rem 0;
+  padding: 0 0.5rem 0.8rem 0.5rem;
   background-color: var(--bs-gray-100);
 }
 
-@media only screen and (min-width: 768px) {
-  .overlayContainer .orderbookContainer > .titleBar {
-    align-items: center;
+@media only screen and (min-width: 992px) {
+  .overlayContainer .orderbookContainer .titleBar {
     padding: 0.8rem 1rem;
     border-radius: 0.6rem;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .overlayContainer .orderbookContainer > .titleBar {
+  .overlayContainer .orderbookContainer .titleBar {
+    align-items: center;
     flex-direction: row;
   }
 }
@@ -46,7 +47,7 @@
   background-color: var(--bs-gray-800);
 }
 
-.overlayContainer .orderbookContainer > .titleBar .refreshButton {
+.overlayContainer .orderbookContainer .titleBar .refreshButton {
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx
index 406978c79..64a038da0 100644
--- a/src/components/Orderbook.tsx
+++ b/src/components/Orderbook.tsx
@@ -9,7 +9,6 @@ import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
 import { Helper as ApiHelper } from '../libs/JmWalletApi'
 import * as ObwatchApi from '../libs/JmObwatchApi'
-// @ts-ignore
 import { useSettings } from '../context/SettingsContext'
 import Balance from './Balance'
 import Sprite from './Sprite'
@@ -233,7 +232,7 @@ const OrderbookTable = ({ data }: OrderbookTableProps) => {
           </>
         )}
       </Table>
-      <div className="mt-4 mb-4 mb-md-0">
+      <div className="mt-4 mb-4 mb-lg-0">
         <TablePagination data={data} pagination={pagination} />
       </div>
     </>
@@ -357,7 +356,7 @@ export function Orderbook({ orders, refresh, nickname }: OrderbookProps) {
         ) : (
           <>
             {nickname && (
-              <div className="mb-3">
+              <div className="mb-3 ps-3 ps-md-0 pt-3 pt-lg-0">
                 <rb.Form.Check
                   type="checkbox"
                   id="highlight-own-offers"
@@ -440,7 +439,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
       placement="bottom"
     >
       <rb.Offcanvas.Header>
-        <rb.Container>
+        <rb.Container fluid="lg">
           <div className="w-100 d-flex">
             <div className="d-flex align-items-center flex-1">
               <rb.Offcanvas.Title>{t('orderbook.title')}</rb.Offcanvas.Title>
@@ -454,7 +453,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
         </rb.Container>
       </rb.Offcanvas.Header>
       <rb.Offcanvas.Body>
-        <rb.Container fluid="md" className="py-4 py-sm-5">
+        <rb.Container fluid="lg" className="py-3">
           {!isInitialized && isLoading ? (
             Array(5)
               .fill('')
@@ -470,7 +469,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
               {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
               {orders && (
                 <rb.Row>
-                  <rb.Col>
+                  <rb.Col className="px-0">
                     <Orderbook nickname={nickname} orders={orders} refresh={refresh} />
                   </rb.Col>
                 </rb.Row>