From 1ce80f551c29453d02034a3ef7c2b976dacdeb2d Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 6 Jun 2026 12:31:04 +0330
Subject: [PATCH] filter fix design

---
 src/app/[name]/(Main)/components/MenuIndex.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/[name]/(Main)/components/MenuIndex.tsx b/src/app/[name]/(Main)/components/MenuIndex.tsx
index 7d100d3..1f5efbf 100644
--- a/src/app/[name]/(Main)/components/MenuIndex.tsx
+++ b/src/app/[name]/(Main)/components/MenuIndex.tsx
@@ -235,7 +235,7 @@ const MenuIndex = () => {
 
       <section className="w-full">
         <div
-          className="flex gap-2 justify-between items-center relative"
+          className="flex flex-wrap gap-2 items-center relative"
           ref={smallCategoriesRef}
         >
           <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">
@@ -243,13 +243,13 @@ const MenuIndex = () => {
               ? ""
               : categories.find((c) => c.id === selectedCategory)?.title || ""}
           </span>
-          <div className="inline-flex min-w-[247px] gap-2 justify-around items-center">
+          <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
             <button
               onClick={toggleFilterModal}
               className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]"
             >
               <Candle2 className="stroke-foreground" size={16} />
-              <span className="text-xs leading-5 font-medium">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">
                 {tMenu("MenuFilterDrawer.Label")}
               </span>
             </button>
@@ -258,7 +258,7 @@ const MenuIndex = () => {
               className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
             >
               <TextAlignIcon className="text-foreground" />
-              <span className="text-xs leading-5 font-medium">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">
                 {activeSortingLabel}
               </span>
             </button>