fix: layouts

src/app/[name]/page.tsx

@@ -218,28 +218,30 @@ const MenuIndex = () => {
 
 
   return (
-    <div className="flex flex-col gap-4 items-center" ref={wrapperRef}>
-      <SearchBox value={search} onChange={updateSearch} />
-      <HorizontalScrollView className="w-full noscrollbar py-4!">
-        {categories.map((item, index) => (
-          <CategoryItemRenderer
-            key={index}
-            className={clsx(
-              index === +selectedCategory && "bg-white!",
-            )}
-            onClick={() => updateCategory(index)}
-          >
-            <Image
-              priority
-              src="/assets/images/food-image.png"
-              width={32}
-              height={32}
-              alt="category image"
-            />
-            <span className="text-xs text-black">{item.title}</span>
-          </CategoryItemRenderer>
-        ))}
-      </HorizontalScrollView>
+    <div className="flex flex-col gap-4 items-center pt-8" ref={wrapperRef}>
+      <div className="w-full">
+        <SearchBox value={search} onChange={updateSearch} />
+        <HorizontalScrollView className="w-full noscrollbar mt-4! py-4!">
+          {categories.map((item, index) => (
+            <CategoryItemRenderer
+              key={index}
+              className={clsx(
+                index === +selectedCategory && "bg-white!",
+              )}
+              onClick={() => updateCategory(index)}
+            >
+              <Image
+                priority
+                src="/assets/images/food-image.png"
+                width={32}
+                height={32}
+                alt="category image"
+              />
+              <span className="text-xs text-black">{item.title}</span>
+            </CategoryItemRenderer>
+          ))}
+        </HorizontalScrollView>
+      </div>
 
       <section className="w-full">
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
@@ -249,7 +251,7 @@ const MenuIndex = () => {
           <div className="inline-flex gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon />
-              <span className="text-xs leading-5">فیلتر بر اساس</span>
+              <span className="text-xs leading-5 font-medium">فیلتر بر اساس</span>
             </button>
             <button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
               <TextAlignIcon />