filter fix design

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>