From 2f0d047a4db56c23dbeae2705ae7bcca0e6e2d91 Mon Sep 17 00:00:00 2001
From: damnnou <skdamn@outlook.com>
Date: Mon, 22 Apr 2024 12:08:49 +0300
Subject: [PATCH] style: adapt header and pools table for mobile

---
 src/components/common/Header/index.tsx     |  2 +-
 src/components/common/Table/poolsTable.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index e3bfc90..0b62f28 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -57,7 +57,7 @@ const Account = () => {
     </div>
 
     return <div className="flex h-full justify-end gap-4 whitespace-nowrap">
-        <div className="hidden lg:block">
+        <div className="max-xl:hidden">
             <w3m-network-button />
         </div>
             <div className="hidden md:block">
diff --git a/src/components/common/Table/poolsTable.tsx b/src/components/common/Table/poolsTable.tsx
index 02c0e4d..adb3b87 100644
--- a/src/components/common/Table/poolsTable.tsx
+++ b/src/components/common/Table/poolsTable.tsx
@@ -74,15 +74,15 @@ const PoolsTable = <TData, TValue>({
                             placeholder="Search pool"
                             value={(table.getColumn(searchID)?.getFilterValue() as string) ?? ""}
                             onChange={(event) => table.getColumn(searchID)?.setFilterValue(event.target.value)}
-                            className="border border-border border-opacity-60 pl-12 h-12 w-80 focus:border-opacity-100 rounded-xl"
+                            className="border border-border border-opacity-60 pl-12 h-12 max-w-80 md:w-64 lg:w-80 focus:border-opacity-100 rounded-xl"
                         />
                         <Search className="absolute left-4 text-border" size={20} />
                     </div>
-                    <ul className="flex gap-1 p-1 border rounded-xl border-border/60 w-fit h-12">
+                    <ul className="flex gap-1 p-1 border rounded-xl border-border/60 w-fit h-12 max-xs:hidden">
                         <li>
                             <Button
                                 onClick={() => table.setGlobalFilter(undefined)}
-                                className="rounded-lg h-full p-4 w-fit"
+                                className="rounded-lg h-full p-4 w-fit flex-nowrap"
                                 size="md"
                                 variant={!isMyPools ? "iconActive" : "ghost"}
                             >
@@ -92,7 +92,7 @@ const PoolsTable = <TData, TValue>({
                         <li>
                             <Button
                                 onClick={() => table.setGlobalFilter(true)}
-                                className="rounded-lg h-full p-4 w-fit"
+                                className="rounded-lg h-full p-4 w-fit whitespace-nowrap"
                                 size="md"
                                 variant={isMyPools ? "iconActive" : "ghost"}
                             >
@@ -100,10 +100,10 @@ const PoolsTable = <TData, TValue>({
                             </Button>
                         </li>
                     </ul>
-                    <div className="flex gap-2 items-center w-fit ml-auto">
+                    <div className="flex gap-2 max-md:gap-4 items-center w-fit ml-auto max-sm:hidden">
                         <label className="flex gap-2 items-center" htmlFor="farmingAvailable">
-                            <Tractor size={20} color="#d84eff" />
-                            Farming Available
+                            <Tractor className="w-5 h-5 max-md:w-6 max-md:h-6" color="#d84eff" />
+                            <span className="max-md:hidden">Farming Available</span>
                         </label>
                         <Switch
                             id="farmingAvailable"