fix: wiki header layout (#2318)

Author: aaryan610

web/app/[workspaceSlug]/(pages)/pages/header.tsx

@@ -6,8 +6,8 @@ import { Home } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
-// ui
-import { Breadcrumbs } from "@plane/ui";
+// plane ui
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
@@ -21,8 +21,8 @@ export const PagesAppDashboardHeader = () => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <Header>
+      <Header.LeftItem>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -31,8 +31,8 @@ export const PagesAppDashboardHeader = () => {
             />
           </Breadcrumbs>
         </div>
-      </div>
-      <div className="flex items-center gap-3 px-3">
+      </Header.LeftItem>
+      <Header.RightItem>
         <a
           onClick={() =>
             captureEvent(GITHUB_REDIRECTED, {
@@ -52,7 +52,7 @@ export const PagesAppDashboardHeader = () => {
           />
           <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
         </a>
-      </div>
-    </div>
+      </Header.RightItem>
+    </Header>
   );
 };

web/app/[workspaceSlug]/(projects)/header.tsx

@@ -21,40 +21,38 @@ export const WorkspaceDashboardHeader = () => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <>
-      <Header>
-        <Header.LeftItem>
-          <div>
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Home" icon={<Home className="h-4 w-4 text-custom-text-300" />} />}
-              />
-            </Breadcrumbs>
-          </div>
-        </Header.LeftItem>
-        <Header.RightItem>
-          <a
-            onClick={() =>
-              captureEvent(GITHUB_REDIRECTED, {
-                element: "navbar",
-              })
-            }
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
-            href="https://github.com/makeplane/plane"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              src={resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage}
-              height={16}
-              width={16}
-              alt="GitHub Logo"
+    <Header>
+      <Header.LeftItem>
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={<BreadcrumbLink label="Home" icon={<Home className="h-4 w-4 text-custom-text-300" />} />}
             />
-            <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
-          </a>
-        </Header.RightItem>
-      </Header>
-    </>
+          </Breadcrumbs>
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <a
+          onClick={() =>
+            captureEvent(GITHUB_REDIRECTED, {
+              element: "navbar",
+            })
+          }
+          className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
+          href="https://github.com/makeplane/plane"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            src={resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={16}
+            width={16}
+            alt="GitHub Logo"
+          />
+          <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
+        </a>
+      </Header.RightItem>
+    </Header>
   );
 };