Increase the size of the mobile drawer 'resize' button

src/Components/SideDrawer/HorizonResizerButton.jsx

@@ -160,7 +160,6 @@ export default function HorizonResizerButton({
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-        cursor: 'col-resize',
         resize: 'horizontal',
         ...(isOnLeft ? {
           left: 0,
@@ -178,6 +177,7 @@ export default function HorizonResizerButton({
           justifyContent: 'center',
           gap: `${gripSize}px`,
           background: theme.palette.primary.background,
+          cursor: 'col-resize',
         }}
         ref={resizerRef}
         data-testid="x_resizer"

src/Components/SideDrawer/SideDrawer.jsx

@@ -88,8 +88,8 @@ export default function SideDrawer() {
           display: 'flex',
           flexDirection: 'row',
           width: '100%',
-          borderLeft: isMobile ? 'none' : `solid 1px ${borderColor}`,
           borderRadius: 0,
+          background: theme.palette.primary.background,
         }}
         ref={sidebarRef}
         onMouseDown={(e) => e.preventDefault()}

src/Components/SideDrawer/VerticalResizerButton.jsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState, useCallback, useRef} from 'react'
 import {useDoubleTap} from 'use-double-tap'
 import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
 import useTheme from '@mui/styles/useTheme'
 import {MOBILE_HEIGHT} from '../../utils/constants'
 import {isNumber} from '../../utils/strings'
@@ -29,8 +30,6 @@ export default function VerticalResizerButton({
   const theme = useTheme()
   const gripButtonRatio = 0.5
   const gripSize = thickness * gripButtonRatio
-  // eslint-disable-next-line no-magic-numbers
-  const verticalPadding = (thickness - gripSize) / 2
 
   const startResizing = useCallback(() => {
     setIsResizing(true)
@@ -168,15 +167,18 @@ export default function VerticalResizerButton({
         }),
       }}
     >
-      <Box
+      <Paper
         sx={{
-          padding: `${verticalPadding}px ${gripSize}px`,
+          width: '150px',
+          paddingTop: `10px`,
+          paddingBottom: '40px',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           gap: `${gripSize}px`,
           background: theme.palette.primary.background,
         }}
+        elevation={0}
         ref={resizerRef}
         data-testid="y_resizer"
         onMouseDown={startResizing}
@@ -194,7 +196,7 @@ export default function VerticalResizerButton({
             }}
           />,
         )}
-      </Box>
+      </Paper>
     </Box>
   )
 }

src/utils/constants.js

@@ -1,2 +1,2 @@
 export const MOBILE_WIDTH = 500
-export const MOBILE_HEIGHT = '50vh'
+export const MOBILE_HEIGHT = '70vh'