From dda7a32bc4c34a30f79ed0167646cce9ecf5b045 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 2 Feb 2026 13:39:37 +0000
Subject: [PATCH] fix: standardize header icon spacing and remove unused
 portals

This commit refactors the desktop header icon container in `components/header.tsx` to ensure all icons are equidistant.

Key changes:
- Changed the icon container from `justify-between w-1/2` to `justify-center flex-1` with a fixed `gap-10`.
- Removed the unused `<div id="timezone-clock-portal" />` which was causing irregular spacing between the TentTree and ModeToggle icons.
- Applied `className="contents"` to the `<div id="header-search-portal" />` so that it doesn't affect the flex layout when empty.
- These changes ensure that icons are always perfectly centered and equidistant regardless of the number of active icons.

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
---
 components/header.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/header.tsx b/components/header.tsx
index daaf5245..fd80bc44 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -66,9 +66,8 @@ export const Header = () => {
         </h1>
       </div>
       
-      <div className="w-1/2 gap-20 hidden md:flex justify-between px-10 items-center z-10">
-        
-          <ProfileToggle/>
+      <div className="flex-1 hidden md:flex justify-center gap-10 items-center z-10">
+        <ProfileToggle/>
         
         <MapToggle />
         
@@ -76,14 +75,12 @@ export const Header = () => {
           <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
-        <div id="header-search-portal" />
+        <div id="header-search-portal" className="contents" />
         
         <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
-        <div id="timezone-clock-portal" />
-
         <ModeToggle />
         
         <HistoryContainer location="header" />