From e926da127e106b436f19b716adede79dc92dd918 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Sun, 28 Dec 2025 11:31:28 +0800
Subject: [PATCH 1/2] hotfix: filter

---
 .../common/table-container-with-header.tsx    |  7 +-
 src/components/status/empty-screen.tsx        |  4 +-
 .../components/filters/asset-filter.tsx       |  2 +-
 .../components/filters/network-filter.tsx     | 77 +++++++++++--------
 .../components/table/markets-table.tsx        |  2 +-
 5 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/components/common/table-container-with-header.tsx b/src/components/common/table-container-with-header.tsx
index e976f029..9b7de329 100644
--- a/src/components/common/table-container-with-header.tsx
+++ b/src/components/common/table-container-with-header.tsx
@@ -3,7 +3,6 @@ type TableContainerWithHeaderProps = {
   actions?: React.ReactNode;
   children: React.ReactNode;
   className?: string;
-  noPadding?: boolean;
 };
 
 /**
@@ -30,14 +29,16 @@ type TableContainerWithHeaderProps = {
  *   <Table>...</Table>
  * </TableContainerWithHeader>
  */
-export function TableContainerWithHeader({ title, actions, children, className = '', noPadding = false }: TableContainerWithHeaderProps) {
+export function TableContainerWithHeader({ title, actions, children, className = '' }: TableContainerWithHeaderProps) {
+  console.log('no padding markets');
+
   return (
     <div className={`bg-surface rounded-md font-zen shadow-sm ${className}`}>
       <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-6 py-0.5">
         <h3 className="font-monospace text-xs uppercase text-secondary">{title}</h3>
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
-      <div className={`overflow-x-auto ${noPadding ? '' : 'pb-4'}`}>{children}</div>
+      <div className="overflow-x-auto pb-4">{children}</div>
     </div>
   );
 }
diff --git a/src/components/status/empty-screen.tsx b/src/components/status/empty-screen.tsx
index 2a51cbec..4b69163e 100644
--- a/src/components/status/empty-screen.tsx
+++ b/src/components/status/empty-screen.tsx
@@ -9,9 +9,7 @@ type EmptyScreenProps = {
 
 export default function EmptyScreen({ message = 'No data', hint, className }: EmptyScreenProps) {
   return (
-    <div
-      className={`bg-surface my-4 flex min-h-48 w-full flex-col items-center justify-center space-y-4 rounded py-8 shadow-sm ${className}`}
-    >
+    <div className={`bg-surface my-4 flex min-h-48 w-full flex-col items-center justify-center space-y-4 rounded py-8 ${className}`}>
       <Image
         src={emptyImg}
         alt="Logo"
diff --git a/src/features/markets/components/filters/asset-filter.tsx b/src/features/markets/components/filters/asset-filter.tsx
index 004d4c77..897f21b4 100644
--- a/src/features/markets/components/filters/asset-filter.tsx
+++ b/src/features/markets/components/filters/asset-filter.tsx
@@ -187,7 +187,7 @@ export default function AssetFilter({
           </ul>
           <div className="bg-surface absolute bottom-0 left-0 right-0 border-gray-700 p-2">
             <button
-              className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary"
+              className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary transition-colors duration-200 hover:text-normal"
               onClick={clearSelection}
               type="button"
             >
diff --git a/src/features/markets/components/filters/network-filter.tsx b/src/features/markets/components/filters/network-filter.tsx
index 5b3868f2..7d5c48a4 100644
--- a/src/features/markets/components/filters/network-filter.tsx
+++ b/src/features/markets/components/filters/network-filter.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { ChevronDownIcon, TrashIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { type SupportedNetworks, getNetworkImg, networks } from '@/utils/networks';
 
@@ -33,6 +33,11 @@ export default function NetworkFilter({ setSelectedNetwork, selectedNetwork }: F
     setIsOpen(false);
   };
 
+  const clearSelection = () => {
+    setSelectedNetwork(null);
+    setIsOpen(false);
+  };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Enter' || event.key === ' ') {
       toggleDropdown();
@@ -84,36 +89,48 @@ export default function NetworkFilter({ setSelectedNetwork, selectedNetwork }: F
           isOpen ? 'visible translate-y-0 opacity-100' : 'invisible -translate-y-2 opacity-0'
         }`}
       >
-        <ul
-          className="custom-scrollbar max-h-96 overflow-auto"
-          role="listbox"
-        >
-          {networks.map((network) => (
-            <li
-              key={network.network}
-              className={`m-2 flex cursor-pointer items-center justify-between rounded p-2 text-sm transition-colors duration-200 hover:bg-gray-300 dark:hover:bg-gray-700 ${
-                selectedNetwork === network.network ? 'bg-gray-300 dark:bg-gray-700' : ''
-              }`}
-              onClick={() => selectNetwork(network.network)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  selectNetwork(network.network);
-                }
-              }}
-              role="option"
-              aria-selected={selectedNetwork === network.network}
-              tabIndex={0}
+        <div className="relative">
+          <ul
+            className="custom-scrollbar max-h-96 overflow-auto pb-12"
+            role="listbox"
+          >
+            {networks.map((network) => (
+              <li
+                key={network.network}
+                className={`m-2 flex cursor-pointer items-center justify-between rounded p-2 text-sm transition-colors duration-200 hover:bg-gray-300 dark:hover:bg-gray-700 ${
+                  selectedNetwork === network.network ? 'bg-gray-300 dark:bg-gray-700' : ''
+                }`}
+                onClick={() => selectNetwork(network.network)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    selectNetwork(network.network);
+                  }
+                }}
+                role="option"
+                aria-selected={selectedNetwork === network.network}
+                tabIndex={0}
+              >
+                <span className="text-primary font-zen">{network.name}</span>
+                <Image
+                  src={network.logo}
+                  alt={network.name}
+                  width={18}
+                  height={18}
+                />
+              </li>
+            ))}
+          </ul>
+          <div className="bg-surface absolute bottom-0 left-0 right-0 border-gray-700 p-2">
+            <button
+              className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary transition-colors duration-200 hover:text-normal"
+              onClick={clearSelection}
+              type="button"
             >
-              <span className="text-primary font-zen">{network.name}</span>
-              <Image
-                src={network.logo}
-                alt={network.name}
-                width={18}
-                height={18}
-              />
-            </li>
-          ))}
-        </ul>
+              <span>Clear</span>
+              <TrashIcon className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/markets/components/table/markets-table.tsx b/src/features/markets/components/table/markets-table.tsx
index e2475ad1..8bf2ff98 100644
--- a/src/features/markets/components/table/markets-table.tsx
+++ b/src/features/markets/components/table/markets-table.tsx
@@ -198,7 +198,6 @@ function MarketsTable({
       <TableContainerWithHeader
         title=""
         actions={headerActions}
-        noPadding={loading || isEmpty || markets.length === 0}
         className="w-full"
       >
         {loading ? (
@@ -214,6 +213,7 @@ function MarketsTable({
           <EmptyScreen
             message="No markets found with the current filters"
             hint={getEmptyStateHint()}
+            className="min-h-[300px] container px-[4%]"
           />
         ) : (
           <Table className={tableClassNames}>

From 54f522550e540acef2332bfb3b8763a1bba2cff6 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Sun, 28 Dec 2025 11:32:21 +0800
Subject: [PATCH 2/2] chore: cleanup

---
 src/components/common/table-container-with-header.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/common/table-container-with-header.tsx b/src/components/common/table-container-with-header.tsx
index 9b7de329..31034cdf 100644
--- a/src/components/common/table-container-with-header.tsx
+++ b/src/components/common/table-container-with-header.tsx
@@ -30,8 +30,6 @@ type TableContainerWithHeaderProps = {
  * </TableContainerWithHeader>
  */
 export function TableContainerWithHeader({ title, actions, children, className = '' }: TableContainerWithHeaderProps) {
-  console.log('no padding markets');
-
   return (
     <div className={`bg-surface rounded-md font-zen shadow-sm ${className}`}>
       <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-6 py-0.5">