fix: auto-scroll active installed-apps category tab into view on mobile (#26414)

* fix: auto-scroll active installed-apps category tab into view on mobile

* updated code3

packages/app-store/_components/AppCategoryNavigation.tsx

@@ -28,17 +28,37 @@ const AppCategoryNavigation = ({
   useQueryParam?: boolean;
 }) => {
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
-  const appCategories = useMemo(() => getAppCategories(baseURL, useQueryParam), [baseURL, useQueryParam]);
+  const appCategories = useMemo(
+    () => getAppCategories(baseURL, useQueryParam),
+    [baseURL, useQueryParam]
+  );
 
   return (
-    <div className={cs("flex flex-col xl:flex-row xl:space-x-6", classNames?.root ?? className)}>
+    <div
+      className={cs(
+        "flex flex-col xl:flex-row xl:space-x-6",
+        classNames?.root ?? className
+      )}
+    >
       <div className="hidden xl:block">
-        <VerticalTabs tabs={appCategories} sticky linkShallow itemClassname={classNames?.verticalTabsItem} />
+        <VerticalTabs
+          tabs={appCategories}
+          sticky
+          linkShallow
+          itemClassname={classNames?.verticalTabsItem}
+        />
       </div>
       <div className="block xl:hidden">
-        <HorizontalTabs tabs={appCategories} linkShallow />
+        <HorizontalTabs
+          tabs={appCategories}
+          linkShallow
+          scrollActiveTabIntoView
+        />
       </div>
-      <main className={classNames?.container ?? containerClassname} ref={animationRef}>
+      <main
+        className={classNames?.container ?? containerClassname}
+        ref={animationRef}
+      >
         {children}
       </main>
     </div>

packages/ui/components/navigation/tabs/HorizontalTabs.tsx

@@ -1,3 +1,5 @@
+import { useIsomorphicLayoutEffect } from "@calcom/lib/hooks/useIsomorphicLayoutEffect";
+import { useRef } from "react";
 import type { HorizontalTabItemProps } from "./HorizontalTabItem";
 import HorizontalTabItem from "./HorizontalTabItem";
 
@@ -6,17 +8,56 @@ export interface NavTabProps {
   linkShallow?: boolean;
   linkScroll?: boolean;
   actions?: JSX.Element;
+  scrollActiveTabIntoView?: boolean;
 }
 
-const HorizontalTabs = function ({ tabs, linkShallow, linkScroll, actions, ...props }: NavTabProps) {
+const HorizontalTabs = ({
+  tabs,
+  linkShallow,
+  linkScroll,
+  actions,
+  scrollActiveTabIntoView,
+  ...props
+}: NavTabProps): JSX.Element => {
+  const navRef = useRef<HTMLElement | null>(null);
+  const lastScrolledActiveHrefRef = useRef<string | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!scrollActiveTabIntoView) return;
+    const navEl = navRef.current;
+    if (!navEl) return;
+
+    if (navEl.scrollWidth <= navEl.clientWidth) return;
+
+    const activeEl = navEl.querySelector<HTMLElement>("[aria-current='page']");
+    if (!activeEl) return;
+
+    const activeHref = activeEl.getAttribute("href");
+    if (activeHref && lastScrolledActiveHrefRef.current === activeHref) return;
+
+    activeEl.scrollIntoView({
+      behavior: "auto",
+      block: "nearest",
+      inline: "center",
+    });
+    if (activeHref) lastScrolledActiveHrefRef.current = activeHref;
+  }, [scrollActiveTabIntoView, tabs]);
+
   return (
     <div className="mb-4 max-w-full lg:mb-5">
       <nav
         className="no-scrollbar flex space-x-0.5 overflow-x-scroll rounded-md"
         aria-label="Tabs"
-        {...props}>
-        {tabs.map((tab, idx) => (
-          <HorizontalTabItem {...tab} key={idx} linkShallow={linkShallow} linkScroll={linkScroll} />
+        ref={navRef}
+        {...props}
+      >
+        {tabs.map((tab) => (
+          <HorizontalTabItem
+            {...tab}
+            key={tab.href}
+            linkShallow={linkShallow}
+            linkScroll={linkScroll}
+          />
         ))}
       </nav>
       {actions && actions}