[Portal] Update: Adjust icon sizes and improve sidebar styling in Header and DocLayout components

Author: Axyl1410

apps/portal/src/app/Header.tsx

@@ -199,7 +199,7 @@ export function Header() {
   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 p-4 lg:px-8 overflow-hidden">
       <div className="container flex items-center justify-between gap-6">
         {/* Top row */}
         <div className="flex items-center gap-2">
@@ -254,14 +254,14 @@ export function Header() {
               onClick={() => router.push("/chat")}
               variant="ghost"
             >
-              <MessageCircleIcon className="size-7" />
+              <MessageCircleIcon className="size-5 lg:size-6" />
             </Button>
             <Button
               className="p-2"
               onClick={() => setShowBurgerMenu(!showBurgerMenu)}
               variant="ghost"
             >
-              <MenuIcon className="size-7" />
+              <MenuIcon className="size-5 lg:size-6" />
             </Button>
           </div>
         </div>

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

@@ -36,7 +36,7 @@ export function DocLayout(props: DocLayoutProps) {
     >
       <aside
         className={clsx(
-          "sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-scroll",
+          "sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-scroll no-scrollbar",
           "hidden xl:flex",
         )}
       >

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

@@ -368,7 +368,7 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
         {!forDesktop && (
           <DialogTrigger asChild>
             <Button className="px-3" variant="ghost">
-              <SearchIcon className="size-6 text-foreground" />
+              <SearchIcon className="size-5 lg:size-6 text-foreground" />
             </Button>
           </DialogTrigger>
         )}

apps/portal/src/components/others/theme/ThemeSwitcher.tsx

@@ -22,11 +22,11 @@ export function ThemeSwitcher(props: { className?: string }) {
       variant="outline"
     >
       {!hasMounted ? (
-        <Skeleton className="size-6 lg:size-5" />
+        <Skeleton className="size-5 lg:size-6" />
       ) : theme === "light" ? (
-        <SunIcon className="size-6 lg:size-5" />
+        <SunIcon className="size-5 lg:size-6" />
       ) : (
-        <MoonIcon className="size-6 lg:size-5" />
+        <MoonIcon className="size-5 lg:size-6" />
       )}
     </Button>
   );