fix: mobile style of controls

apps/web/src/views/PositionManagers/components/ControlsContainer.tsx

@@ -18,3 +18,20 @@ export const ControlsContainer = styled(Flex).attrs({
     margin-bottom: 0;
   }
 `
+
+export const ControlGroup = styled(Flex)`
+  width: 100%;
+  align-items: ${(props) => props.alignItems || 'center'};
+  flex-direction: ${(props) => props.flexDirection || 'row'};
+  justify-content: ${(props) => props.justifyContent || 'space-between'};
+  margin-bottom: 1em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: auto;
+    margin-bottom: 0;
+  }
+`

apps/web/src/views/PositionManagers/components/Filters.tsx

@@ -5,18 +5,6 @@ import { useMemo, useCallback, ChangeEvent } from 'react'
 
 import { useSearch, useSortBy } from '../hooks'
 
-export const FilterContainer = styled(Flex).attrs({
-  alignItems: 'center',
-})`
-  width: 100%;
-  padding: 0.5em 0;
-
-  ${({ theme }) => theme.mediaQueries.sm} {
-    width: auto;
-    padding: 0;
-  }
-`
-
 const LabelWrapper = styled.div`
   > ${Text} {
     font-size: 12px;

apps/web/src/views/PositionManagers/components/Toggles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { Text, Flex, Toggle } from '@pancakeswap/uikit'
+import { Text, Flex, Toggle, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { useTranslation } from '@pancakeswap/localization'
 
 import { useStakeOnly, useBooster } from '../hooks'
@@ -16,23 +16,25 @@ const ToggleWrapper = styled(Flex).attrs({
 export function StakeOnlyToggle() {
   const [stakeOnly, toggle] = useStakeOnly()
   const { t } = useTranslation()
+  const { isMobile } = useMatchBreakpoints()
 
   return (
     <ToggleWrapper>
       <Toggle checked={stakeOnly} onChange={toggle} scale="sm" />
-      <Text> {t('Staked only')}</Text>
+      <Text>{isMobile ? t('Staked') : t('Staked only')}</Text>
     </ToggleWrapper>
   )
 }
 
 export function BoosterToggle() {
   const [booster, toggle] = useBooster()
   const { t } = useTranslation()
+  const { isMobile } = useMatchBreakpoints()
 
   return (
     <ToggleWrapper>
       <Toggle checked={booster} onChange={toggle} scale="sm" />
-      <Text> {t('Booster Available')}</Text>
+      <Text> {isMobile ? t('Booster') : t('Booster Available')}</Text>
     </ToggleWrapper>
   )
 }

apps/web/src/views/PositionManagers/containers/Controls.tsx

@@ -1,25 +1,48 @@
+import { useMatchBreakpoints } from '@pancakeswap/uikit'
+
 import {
   ControlsContainer,
+  ControlGroup,
   LiveSwitch,
   ViewSwitch,
   StakeOnlyToggle,
   BoosterToggle,
-  FilterContainer,
   SortFilter,
   SearchFilter,
 } from '../components'
 
 export function Controls() {
-  return (
+  const { isDesktop } = useMatchBreakpoints()
+
+  const controls = isDesktop ? (
     <ControlsContainer>
-      <ViewSwitch />
-      <StakeOnlyToggle />
-      <BoosterToggle />
-      <LiveSwitch />
-      <FilterContainer>
+      <ControlGroup>
+        <ViewSwitch />
+        <StakeOnlyToggle />
+        <BoosterToggle />
+        <LiveSwitch />
+      </ControlGroup>
+      <ControlGroup justifyContent="flex-end">
+        <SortFilter />
+        <SearchFilter />
+      </ControlGroup>
+    </ControlsContainer>
+  ) : (
+    <ControlsContainer justifyContent="flex-start" flexDirection="column">
+      <ControlGroup>
+        <ViewSwitch />
+        <StakeOnlyToggle />
+        <BoosterToggle />
+      </ControlGroup>
+      <ControlGroup justifyContent="flex-start">
+        <LiveSwitch />
+      </ControlGroup>
+      <ControlGroup>
         <SortFilter />
         <SearchFilter />
-      </FilterContainer>
+      </ControlGroup>
     </ControlsContainer>
   )
+
+  return controls
 }

apps/web/src/views/PositionManagers/hooks/useFilters.ts

@@ -1,11 +1,13 @@
 import { useRouter } from 'next/router'
+import { useSearchParams } from 'next/navigation'
 import { useCallback, useMemo } from 'react'
 import { updateQuery } from '@pancakeswap/utils/clientRouter'
 
 function filterHookFactory(filterName: string) {
   return function useFilter(): [string | undefined, (filter: string | undefined) => void] {
     const router = useRouter()
-    const filter = useMemo(() => router.query[filterName] as string | undefined, [router.query])
+    const searchParams = useSearchParams()
+    const filter = useMemo(() => searchParams.get(filterName), [searchParams])
 
     const setFilter = useCallback(
       (value?: string) => {

apps/web/src/views/PositionManagers/hooks/useToggles.ts

@@ -1,11 +1,13 @@
 import { useRouter } from 'next/router'
+import { useSearchParams } from 'next/navigation'
 import { useCallback, useMemo } from 'react'
 import { updateQuery } from '@pancakeswap/utils/clientRouter'
 
 function toggleHookFactory(queryName: string) {
   return function useToggle(): [boolean, () => void] {
     const router = useRouter()
-    const on = useMemo(() => router.query[queryName] === '1', [router.query])
+    const searchParams = useSearchParams()
+    const on = useMemo(() => searchParams.get(queryName) === '1', [searchParams])
     const toggle = useCallback(() => {
       router.push(
         updateQuery(router.asPath, {

apps/web/src/views/PositionManagers/hooks/useViewMode.ts

@@ -1,13 +1,15 @@
 import { ViewMode } from '@pancakeswap/uikit'
 import { useRouter } from 'next/router'
+import { useSearchParams } from 'next/navigation'
 import { useCallback, useMemo } from 'react'
 import { updateQuery } from '@pancakeswap/utils/clientRouter'
 
 export function useViewMode() {
   const router = useRouter()
+  const searchParams = useSearchParams()
   const mode = useMemo(
-    () => (router.query.view === String(ViewMode.CARD).toLocaleLowerCase() ? ViewMode.CARD : ViewMode.TABLE),
-    [router.query],
+    () => (searchParams.get('view') === String(ViewMode.CARD).toLocaleLowerCase() ? ViewMode.CARD : ViewMode.TABLE),
+    [searchParams],
   )
   const setViewMode = useCallback(
     (viewMode: ViewMode) => {