fix: header styles

Author: asuzuki-jumptrading

src/components/PopoverDropdown.tsx

@@ -4,6 +4,7 @@ import type { PropsWithChildren, ReactNode } from "react";
 import { containerElAtom } from "../atoms";
 import { useAtomValue } from "jotai";
 import { Flex } from "@radix-ui/themes";
+import { maxZIndex } from "../consts";
 
 interface PopoverDropdownProps {
   content: ReactNode;
@@ -28,6 +29,9 @@ export default function PopoverDropdown({
       <Popover.Portal container={containerEl}>
         <Popover.Content
           className={styles.popoverContent}
+          style={{
+            zIndex: maxZIndex,
+          }}
           sideOffset={5}
           tabIndex={undefined}
         >

src/consts.ts

@@ -11,17 +11,19 @@ export const defaultMaxComputeUnits = 50_000_000;
 export const clusterIndicatorHeight = 5;
 
 export const headerHeight = 48;
-export const headerBottomSpacing = 17;
 export const headerSpacing = 13;
 export const navToggleHeight = 21;
 export const largeNavToggleHeight = 28;
 export const slotsNavSpacing = 5;
-export const epochThumbPadding = slotsNavSpacing;
 
 export const logoWidth = 21;
 export const logoRightSpacing = 8;
+export const epochThumbPadding = logoRightSpacing;
+
 export const slotsListWidth = 122;
-export const slotNavWidth = logoWidth + logoRightSpacing + slotsListWidth;
+export const slotNavWithoutListWidth = logoWidth + logoRightSpacing;
+export const slotNavWidth =
+  slotNavWithoutListWidth + slotsListWidth + slotsNavSpacing;
 
 export const narrowNavMedia = "(max-width: 768px)";
 

src/features/Header/Nav.tsx

@@ -16,7 +16,7 @@ import { useAtomValue } from "jotai";
 import type { RouteLabel } from "../../hooks/useCurrentRoute";
 import { RouteLabelToPath, useCurrentRoute } from "../../hooks/useCurrentRoute";
 import useNavigateLeaderSlot from "../../hooks/useNavigateLeaderSlot";
-import { slotsNavSpacing } from "../../consts";
+import { maxZIndex, slotsNavSpacing } from "../../consts";
 import { clusterAtom } from "../../api/atoms";
 import { getClusterColor } from "../../utils";
 import { navButtonTextColor } from "../../colors";
@@ -126,7 +126,12 @@ export function DropdownNav() {
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal container={containerEl}>
-        <DropdownMenu.Content className={styles.navDropdownContent}>
+        <DropdownMenu.Content
+          side="bottom"
+          sideOffset={5}
+          className={styles.navDropdownContent}
+          style={{ zIndex: maxZIndex }}
+        >
           {Object.keys(RouteLabelToPath).map((label) => {
             const routeLabel = label as RouteLabel;
             if (routeLabel === currentRoute) return;

src/features/Header/index.tsx

@@ -4,11 +4,11 @@ import { DropdownNav, NavHandler, NavLinks } from "./Nav";
 import { useMedia } from "react-use";
 import {
   epochThumbPadding,
-  headerBottomSpacing,
   headerHeight,
   headerSpacing,
   logoRightSpacing,
   maxZIndex,
+  slotNavWithoutListWidth,
   slotsNavSpacing,
 } from "../../consts";
 import Logo from "./Logo";
@@ -18,13 +18,28 @@ import { isNavCollapsedAtom } from "../../atoms";
 import { useAtomValue } from "jotai";
 import NavBlur from "../Navigation/NavBlur";
 import { slotNavBackgroundColor } from "../../colors";
+import { useCurrentRoute } from "../../hooks/useCurrentRoute";
+import { useMemo } from "react";
 
 export default function Header() {
   const showDropdownNav = useMedia("(max-width: 900px)");
   const isXNarrow = useMedia("(max-width: 401px)");
   const isNarrow = useMedia("(max-width: 768px)");
   const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
 
+  const currentRoute = useCurrentRoute();
+  const isSchedule = currentRoute === "Schedule";
+
+  const leftBackground = useMemo(() => {
+    if (isNavCollapsed) return undefined;
+    if (isSchedule) {
+      // only color the epoch bar portion
+      const width = `${slotNavWithoutListWidth + epochThumbPadding}px`;
+      return `linear-gradient(to right, ${slotNavBackgroundColor} 0px ${width}, transparent ${width} 100%)`;
+    }
+    return slotNavBackgroundColor;
+  }, [isNavCollapsed, isSchedule]);
+
   const useExtraNarrowGap = isNavCollapsed && isXNarrow;
   const extraNarrowGap = "3px";
 
@@ -47,13 +62,11 @@ export default function Header() {
             gapX={useExtraNarrowGap ? extraNarrowGap : `${logoRightSpacing}px`}
             // slots nav background color boundary
             pr={useExtraNarrowGap ? extraNarrowGap : `${slotsNavSpacing}px`}
-            pb={`${headerBottomSpacing}`}
             style={{
-              marginLeft: -slotsNavSpacing,
-              backgroundColor: isNavCollapsed
-                ? undefined
-                : slotNavBackgroundColor,
+              background: leftBackground,
             }}
+            // align with epoch bar thumb overflow padding
+            ml={`${-epochThumbPadding}px`}
             pl={`${epochThumbPadding}px`}
           >
             {isNarrow && isNavCollapsed && (
@@ -78,7 +91,6 @@ export default function Header() {
                 : // blur color boundary
                   `${headerSpacing - slotsNavSpacing}px`
             }
-            pb={`${headerBottomSpacing}`}
           >
             <NavHandler />
             {showDropdownNav ? <DropdownNav /> : <NavLinks />}

src/features/Header/nav.module.css

@@ -34,6 +34,6 @@
   flex-direction: column;
   background-color: #1c2129;
   border: 1px solid rgba(250, 250, 250, 0.08);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-radius: 5px;
+  min-width: var(--radix-dropdown-menu-trigger-width);
 }

src/features/Navigation/index.tsx

@@ -14,6 +14,8 @@ import {
   maxZIndex,
   slotsListWidth,
   epochThumbPadding,
+  slotNavWidth,
+  slotNavWithoutListWidth,
 } from "../../consts";
 import { StatusIndicator } from "./Status";
 import AutoSizer from "react-virtualized-auto-sizer";
@@ -43,10 +45,7 @@ export default function Navigation() {
 
   const currentRoute = useCurrentRoute();
   const width = useMemo(() => {
-    const noListWidth = logoWidth + logoRightSpacing;
-    return currentRoute === "Schedule"
-      ? noListWidth
-      : noListWidth + slotsListWidth + slotsNavSpacing;
+    return currentRoute === "Schedule" ? slotNavWithoutListWidth : slotNavWidth;
   }, [currentRoute]);
 
   return (