IMPROVED - Fix dock bar height jump, enlarge icons, refine active state

components/layout/site-dock.tsx

@@ -186,13 +186,13 @@ export function SiteDock({
       >
         <Dock
           direction="bottom"
-          iconSize={44}
+          iconSize={50}
-          iconMagnification={74}
+          iconMagnification={86}
-          iconDistance={150}
+          iconDistance={160}
-          className="pointer-events-auto border-border/60 bg-background/70 shadow-panel"
+          className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
         >
           {/* Logo — first icon in the dock */}
-          <DockIcon className="group relative overflow-visible rounded-[30%] border border-border/60 bg-foreground/[0.04]">
+          <DockIcon className="group relative overflow-visible rounded-[28%] border border-border/60 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.5)]">
             <Link
               href={homeHref}
               aria-label="mohfarawati — Home"
@@ -201,9 +201,9 @@ export function SiteDock({
               <Image
                 src={logoSrc}
                 alt="mohfarawati"
-                width={80}
+                width={96}
-                height={80}
+                height={96}
-                sizes="80px"
+                sizes="96px"
                 priority
                 className={cn(
                   "h-full w-full rounded-full object-contain transition-opacity duration-300",
@@ -214,7 +214,7 @@ export function SiteDock({
             <DockTip label="mohfarawati" />
           </DockIcon>
 
-          <div className="mx-1 h-8 w-px self-center bg-border/70" aria-hidden />
+          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
           {navItems.map(({ key, path, Icon, disabled }) => {
             const itemPath = path || "/";
@@ -223,7 +223,7 @@ export function SiteDock({
 
             const inner = (
               <span className="flex h-full w-full items-center justify-center rounded-[inherit]">
-                <Icon className="h-[55%] w-[55%]" />
+                <Icon className="h-[72%] w-[72%]" strokeWidth={1.9} />
               </span>
             );
 
@@ -231,14 +231,20 @@ export function SiteDock({
               <DockIcon
                 key={key}
                 className={cn(
-                  "group relative overflow-visible rounded-[30%] border transition-colors",
+                  "group relative overflow-visible rounded-[28%] border transition-all duration-200",
+                  "shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
                   isActive
-                    ? "border-primary/60 bg-primary/10 text-primary"
+                    ? "border-primary/50 bg-primary/15 text-primary shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_0_0_1px_hsl(var(--primary)/0.35),0_10px_24px_-8px_hsl(var(--primary)/0.6)]"
                     : disabled
                       ? "border-border/50 bg-foreground/[0.03] text-foreground/35"
-                      : "border-border/60 bg-foreground/[0.04] text-foreground/80 hover:text-foreground",
+                      : "border-border/60 bg-foreground/[0.05] text-foreground/75 hover:border-border hover:bg-foreground/[0.09] hover:text-foreground",
                 )}
               >
+                {/* top gloss */}
+                <span
+                  aria-hidden
+                  className="pointer-events-none absolute inset-0 rounded-[inherit] bg-gradient-to-b from-white/10 to-transparent"
+                />
                 {disabled ? (
                   <span aria-disabled="true" className="flex h-full w-full cursor-not-allowed items-center justify-center">
                     {inner}
@@ -255,13 +261,6 @@ export function SiteDock({
                 )}
 
                 <DockTip label={label} soon={disabled ? t("soon") : undefined} />
-
-                {isActive ? (
-                  <span
-                    aria-hidden
-                    className="absolute -bottom-1.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"
-                  />
-                ) : null}
               </DockIcon>
             );
           })}

components/ui/dock.tsx

@@ -107,7 +107,7 @@ const DockIcon = ({
   ...props
 }: DockIconProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const padding = Math.max(6, size * 0.2);
+  const padding = Math.max(4, size * 0.12);
   const defaultMouseX = useMotionValue(Infinity);
 
   const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {