Adjust icon sizes in Header, DocSearch, and ThemeSwitcher components for consistency

Author: alivinshiva

apps/portal/src/app/Header.tsx

@@ -195,7 +195,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 px-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">
@@ -250,14 +250,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/others/DocSearch.tsx

@@ -198,7 +198,7 @@ function SearchModalContent(props: { closeModal: () => void }) {
           {/* links */}
           {data && data.length > 0 && (
             <div
-              className="styled-scrollbar flex max-h-[50vh] min-h-[200px] flex-col gap-2 overflow-y-auto p-4"
+              className="styled-scrollbar flex max-h-[50vh] min-h-[200px] flex-col gap-2 overflow-y-scroll no-scrollbar p-4"
               ref={scrollableElement}
             >
               {data.map((result) => {
@@ -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 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>
   );