From 4f930345f9aab066f831ad93e55a1d68ba4b5fed Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Tue, 14 Feb 2023 11:13:09 -0800
Subject: [PATCH] Fix book controls overflow on small displays

---
 .../src/components/BookTable/BookControl.tsx  | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx
index 869a56e6..add45ded 100644
--- a/frontend/src/components/BookTable/BookControl.tsx
+++ b/frontend/src/components/BookTable/BookControl.tsx
@@ -80,36 +80,38 @@ const BookControl = ({
           </Grid>
         ) : null}
 
-        <Grid item>
-          <Tooltip
-            placement='bottom'
-            enterTouchDelay={200}
-            enterDelay={700}
-            enterNextDelay={2000}
-            title={t('Show Lightning swaps')}
-          >
-            <ToggleButtonGroup
-              sx={{
-                height: '2.6em',
-                backgroundColor: theme.palette.background.paper,
-                border: '0.5px solid',
-                borderColor: 'text.disabled',
-                '&:hover': {
-                  borderColor: 'text.primary',
-                  border: '1px solid',
-                },
-              }}
-              size='small'
-              exclusive={true}
-              value={fav.mode}
-              onChange={handleModeChange}
+        {width > smallestToolbarWidth + 5 ? (
+          <Grid item>
+            <Tooltip
+              placement='bottom'
+              enterTouchDelay={200}
+              enterDelay={700}
+              enterNextDelay={2000}
+              title={t('Show Lightning swaps')}
             >
-              <ToggleButton value={'swap'} color={'secondary'}>
-                <SwapCalls />
-              </ToggleButton>
-            </ToggleButtonGroup>
-          </Tooltip>
-        </Grid>
+              <ToggleButtonGroup
+                sx={{
+                  height: '2.6em',
+                  backgroundColor: theme.palette.background.paper,
+                  border: '0.5px solid',
+                  borderColor: 'text.disabled',
+                  '&:hover': {
+                    borderColor: 'text.primary',
+                    border: '1px solid',
+                  },
+                }}
+                size='small'
+                exclusive={true}
+                value={fav.mode}
+                onChange={handleModeChange}
+              >
+                <ToggleButton value={'swap'} color={'secondary'}>
+                  <SwapCalls />
+                </ToggleButton>
+              </ToggleButtonGroup>
+            </Tooltip>
+          </Grid>
+        ) : null}
 
         <Grid item>
           <ToggleButtonGroup