feat: user can enable/disable a watchlist

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -5,6 +5,7 @@ import React, {useState} from 'react'
 import {EditOutlined} from '@ant-design/icons'
 import type {Connector} from '../../../utils/api/connectors'
 import type {Watchlist} from '../../../utils/api'
+import useBreakpoint from "../../../hooks/useBreakpoint"
 
 export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
     watchlist: Watchlist
@@ -14,10 +15,9 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
     const [form] = Form.useForm()
     const [open, setOpen] = useState(false)
     const [loading, setLoading] = useState(false)
+    const sm = useBreakpoint('sm')
 
-    const showDrawer = () => {
-        setOpen(true)
-    }
+    const showDrawer = () => setOpen(true)
 
     const onClose = () => {
         setOpen(false)
@@ -44,7 +44,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
             </Typography.Link>
             <Drawer
                 title={t`Update a Watchlist`}
-                width='80%'
+                width={sm ? '100%' : '80%'}
                 onClose={onClose}
                 open={open}
                 loading={loading}