fix: pages tabs responsive fixes (#3635)

web/hooks/use-window-size.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const useSize = () => {
+  const [windowSize, setWindowSize] = useState([window.innerWidth, window.innerHeight]);
+
+  useEffect(() => {
+    const windowSizeHandler = () => {
+      setWindowSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener("resize", windowSizeHandler);
+    return () => {
+      window.removeEventListener("resize", windowSizeHandler);
+    };
+  }, []);
+
+  return windowSize;
+};
+
+export default useSize;

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "next-themes";
 import { useApplication, useEventTracker, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
+import useSize from "hooks/use-window-size";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -66,6 +67,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
     useProjectPages();
   // hooks
   const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
+  const [windowWidth] = useSize();
   // local storage
   const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
   // fetching pages from API
@@ -103,7 +105,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
-  const mobileTabList = (
+  const MobileTabList = () => (
     <Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
       <div className="flex flex-wrap items-center gap-4">
         {PAGE_TABS_LIST.map((tab) => (
@@ -166,25 +168,29 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
                 }
               }}
             >
-              <div className="md:hidden">{mobileTabList}</div>
+              {windowWidth < 768 ? (
-              <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
+                <MobileTabList />
-                <div className="flex flex-wrap items-center gap-4">
+              ) : (
-                  {PAGE_TABS_LIST.map((tab) => (
+                <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
-                    <Tab
+                  <div className="flex flex-wrap items-center gap-4">
-                      key={tab.key}
+                    {PAGE_TABS_LIST.map((tab) => (
-                      className={({ selected }) =>
+                      <Tab
-                        `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                        key={tab.key}
-                          selected
+                        className={({ selected }) =>
-                            ? "border-custom-primary bg-custom-primary text-white"
+                          `rounded-full border px-5 py-1.5 text-sm outline-none ${
-                            : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                            selected
-                        }`
+                              ? "border-custom-primary bg-custom-primary text-white"
-                      }
+                              : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
-                    >
+                          }`
-                      {tab.title}
+                        }
-                    </Tab>
+                      >
-                  ))}
+                        {tab.title}
-                </div>
+                      </Tab>
-              </Tab.List>
+                    ))}
+                  </div>
+                </Tab.List>
+              )}
+
               <Tab.Panels as={Fragment}>
                 <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
                   <RecentPagesList />