[TOOL-5083] Portal: Fix header on mobile viewport (#7661)

Author: MananTank

apps/portal/src/app/Header.tsx

@@ -8,7 +8,7 @@ import {
   TableOfContentsIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { DocSearch } from "@/components/others/DocSearch";
 import { Button } from "@/components/ui/button";
@@ -191,13 +191,12 @@ const supportLinks = [
 
 export function Header() {
   const [showBurgerMenu, setShowBurgerMenu] = useState(false);
-  const router = useRouter();
   const pathname = usePathname();
 
   return (
-    <header className="flex w-full flex-col gap-2 border-b bg-background pt-4 px-4 lg:px-8 overflow-hidden">
+    <header className="flex w-full flex-col gap-2 border-b bg-background pt-4 px-4 pb-4 xl:pb-0 lg:px-8 overflow-hidden">
+      {/* Top row */}
       <div className="container flex items-center justify-between gap-6">
-        {/* Top row */}
         <div className="flex items-center gap-2">
           <Link
             aria-label="thirdweb Docs"
@@ -219,7 +218,7 @@ export function Header() {
               href="https://github.com/thirdweb-dev"
               target="_blank"
             >
-              <GithubIcon className="mx-3 size-6" />
+              <GithubIcon className="size-6 lg:size-5" />
             </Link>
           </div>
 
@@ -232,25 +231,21 @@ export function Header() {
           </div>
 
           <div className="hidden xl:block">
-            <Button
-              onClick={() => {
-                router.push("/chat");
-              }}
-            >
-              <MessageCircleIcon className="mr-2 size-4" />
-              Ask AI
+            <Button asChild>
+              <Link href="/chat">
+                <MessageCircleIcon className="mr-2 size-4" />
+                Ask AI
+              </Link>
             </Button>
           </div>
 
           <div className="flex items-center gap-1 xl:hidden">
             <ThemeSwitcher className="border-none bg-transparent" />
             <DocSearch variant="icon" />
-            <Button
-              className="p-2"
-              onClick={() => router.push("/chat")}
-              variant="ghost"
-            >
-              <MessageCircleIcon className="size-7" />
+            <Button className="p-2" asChild variant="ghost">
+              <Link href="/chat">
+                <MessageCircleIcon className="size-6" />
+              </Link>
             </Button>
             <Button
               className="p-2"
@@ -264,13 +259,13 @@ export function Header() {
       </div>
 
       {/* Bottom row - hidden on mobile */}
-      <div className="container hidden items-center justify-between gap-6 xl:flex">
+      <div className="container hidden items-center justify-between gap-6 xl:flex mt-1">
         <nav className="flex grow gap-5">
-          <ul className="flex flex-row items-center gap-5">
+          <ul className="flex flex-row items-center gap-0 mb-1">
             {links.map((link) => {
               return (
                 <li
-                  className="flex items-center py-4 relative overflow-hidden"
+                  className="flex items-center py-2 relative px-2.5 rounded-lg hover:bg-accent hover:text-foreground"
                   key={link.href}
                   onClick={() => {
                     setShowBurgerMenu(false);
@@ -281,7 +276,7 @@ export function Header() {
                 >
                   <NavLink href={link.href} name={link.name} />
                   {pathname.includes(link.href) && (
-                    <div className="bg-violet-700 h-1 inset-x-0.5 rounded-full absolute -bottom-0.5" />
+                    <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
                   )}
                 </li>
               );

apps/portal/src/components/Layouts/DocLayout.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@/lib/utils";
 import { PageFooter } from "../Document/PageFooter";
 import {
   DocSidebar,
@@ -25,17 +25,18 @@ type DocLayoutProps = {
 export function DocLayout(props: DocLayoutProps) {
   return (
     <div
-      className={`container text-muted-foreground relative flex flex-col gap-12 xl:grid p-4 ${
+      className={cn(
+        "container text-muted-foreground relative flex flex-col gap-12 xl:grid",
         props.showTableOfContents !== false
           ? "xl:grid-cols-[220px_720px_1fr]"
-          : "xl:grid-cols-[220px_1160px]"
-      }`}
+          : "xl:grid-cols-[220px_1160px]",
+      )}
       style={{
         minHeight: "calc(100vh - var(--sticky-top-height))",
       }}
     >
       <aside
-        className={clsx(
+        className={cn(
           "sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-hidden",
           "hidden xl:flex",
         )}

apps/portal/src/components/others/DocSearch.tsx

@@ -354,11 +354,11 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
         {forDesktop && (
           <DialogTrigger asChild>
             <Button
-              className="flex w-64 justify-between gap-6 px-3 text-muted-foreground"
+              className="flex w-64 justify-between gap-6 px-3 text-muted-foreground bg-card"
               variant="outline"
             >
-              Search Docs
-              <div className="flex items-center gap-1 rounded-sm border bg-background px-2 py-1 text-muted-foreground text-xs">
+              <span className="text-xs">Search Docs</span>
+              <div className="flex items-center gap-1 rounded-sm px-1 py-1 text-muted-foreground text-xs">
                 <CommandIcon className="size-3" />K
               </div>
             </Button>

codecov.yml

@@ -16,7 +16,7 @@ coverage:
           - "**/__generated__/**"
           - "**/contract/deployment/zksync/**"
           - "*/thirdweb/src/contract/deployment/zksync/zkDeployContract.ts"
-      
+
 
 github_checks:
     annotations: true
@@ -30,5 +30,5 @@ comment:
   require_changes: false  # if true: only post the comment if coverage changes
   require_base: false        # [yes :: must have a base report to post]
   require_head: true       # [yes :: must have a head report to post]
-  show_carryforward_flags: true 
+  show_carryforward_flags: true
   hide_comment_details: true #collapse all the "detailed info" for the PR comment