fixed subpage pills (#4204)

* fixed subpage pills

* nit

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -255,7 +255,7 @@ function EventTypeSingleLayout({
           <div className="hidden xl:block">
             <VerticalTabs tabs={EventTypeTabs} sticky />
           </div>
-          <div className="relative left-0 right-0 -mx-6 w-[calc(100%+40px)] p-2 md:mx-0 md:p-0 xl:hidden">
+          <div className="p-2 md:mx-0 md:p-0 xl:hidden">
             <HorizontalTabs tabs={EventTypeTabs} />
           </div>
           <div className="w-full ltr:mr-2 rtl:ml-2">

packages/ui/v2/core/apps/Categories.tsx

@@ -17,7 +17,7 @@ export default function AppStoreCategories({
   return (
     <div className="mb-16">
       <Slider
-        className="mb-16"
+        className="mt-8 mb-16"
         title={t("featured_categories")}
         items={categories}
         itemKey={(category) => category.name}

packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx

@@ -10,16 +10,16 @@ export interface NavTabProps {
 
 const HorizontalTabs: FC<NavTabProps> = ({ tabs, ...props }) => {
   return (
-    <>
+    <div className="-mx-6 mb-2 w-[calc(100%+40px)]">
       <nav
-        className="no-scrollbar flex space-x-1 overflow-scroll px-6 md:overflow-visible md:px-0"
+        className="no-scrollbar flex space-x-1 overflow-scroll px-6 md:overflow-visible"
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab, idx) => (
           <HorizontalTabItem {...tab} key={idx} />
         ))}
       </nav>
-    </>
+    </div>
   );
 };