@flamingo-stack/openframe-frontend-core 0.0.493 → 0.0.494

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -1,24 +1,24 @@
-'use client'
+'use client';
 
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { useEffect, useRef } from 'react'
-import { cn } from '../../../utils/cn'
-import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useEffect, useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon';
 import {
   type AppLayoutDrawerHandle,
   useAppLayoutDrawerContainer,
   useAppLayoutDrawerCoordination,
-} from '../../navigation/app-layout-context'
-import { HeaderButton } from '../../navigation/header-button'
-import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer'
-import { TimeTrackerPanel } from './time-tracker-panel'
-import { useOptionalTimeTracker } from './time-tracker-context'
-import { useTrackerClock } from './use-tracker-clock'
+} from '../../navigation/app-layout-context';
+import { HeaderButton } from '../../navigation/header-button';
+import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer';
+import { useOptionalTimeTracker } from './time-tracker-context';
+import { TimeTrackerPanel } from './time-tracker-panel';
+import { useTrackerClock } from './use-tracker-clock';
 
 export interface TimeTrackerHeaderButtonProps {
   /** Dimming/disabled passthrough from the header. */
-  className?: string
-  disabled?: boolean
+  className?: string;
+  disabled?: boolean;
 }
 
 /**
@@ -32,49 +32,49 @@ export interface TimeTrackerHeaderButtonProps {
  * falls back to a viewport-wide backdrop.
  */
 export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHeaderButtonProps) {
-  const ctx = useOptionalTimeTracker()
+  const ctx = useOptionalTimeTracker();
   const elapsedLabel = useTrackerClock({
     status: ctx?.status ?? 'ready',
     runningSince: ctx?.runningSince,
     accumulatedMs: ctx?.accumulatedMs,
-  })
-  const layoutContainer = useAppLayoutDrawerContainer()
-  const coordination = useAppLayoutDrawerCoordination()
+  });
+  const layoutContainer = useAppLayoutDrawerContainer();
+  const coordination = useAppLayoutDrawerCoordination();
 
-  const isOpen = ctx?.isOpen ?? false
-  const isOpenRef = useRef(isOpen)
-  isOpenRef.current = isOpen
-  const closeRef = useRef(ctx?.close)
-  closeRef.current = ctx?.close
+  const isOpen = ctx?.isOpen ?? false;
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  const closeRef = useRef(ctx?.close);
+  closeRef.current = ctx?.close;
   // Stable handle: the same object must be registered AND passed as `self`
   // to notifyDrawerDidOpen so the coordinator can skip it when closing the
   // other panels.
-  const selfHandleRef = useRef<AppLayoutDrawerHandle | null>(null)
+  const selfHandleRef = useRef<AppLayoutDrawerHandle | null>(null);
   if (!selfHandleRef.current) {
     selfHandleRef.current = {
       close: () => {
-        if (isOpenRef.current) closeRef.current?.()
+        if (isOpenRef.current) closeRef.current?.();
       },
-    }
+    };
   }
 
   useEffect(() => {
-    if (isOpen) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
-  }, [isOpen, coordination])
+    if (isOpen) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined);
+  }, [isOpen, coordination]);
 
   useEffect(() => {
-    if (!selfHandleRef.current) return
-    return coordination?.registerDrawer(selfHandleRef.current)
-  }, [coordination])
+    if (!selfHandleRef.current) return;
+    return coordination?.registerDrawer(selfHandleRef.current);
+  }, [coordination]);
 
-  if (!ctx) return null
+  if (!ctx) return null;
 
-  const { open, close, status } = ctx
-  const isPaused = status === 'paused'
-  const isActive = status === 'tracking' || isPaused
+  const { open, close, status } = ctx;
+  const isPaused = status === 'paused';
+  const isActive = status === 'tracking' || isPaused;
 
   return (
-    <PopoverPrimitive.Root open={isOpen} onOpenChange={(next) => (next ? open() : close())}>
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={next => (next ? open() : close())}>
       <PopoverPrimitive.Trigger asChild>
         <HeaderButton
           aria-label="Time tracker"
@@ -82,7 +82,11 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
           disabled={disabled}
           className={cn(
             'outline-none',
-            isActive && 'w-auto gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-sf)] md:w-auto',
+            // ODS top-navigation spec (Figma 2797-5978): the active cell keeps
+            // its square icon-only footprint on mobile and becomes a fixed
+            // 144px cell with the live clock from md up.
+            isActive &&
+              'md:w-auto md:min-w-[144px] md:justify-center md:gap-[var(--spacing-system-xsf)] md:px-[var(--spacing-system-sf)]',
             className,
           )}
           icon={
@@ -96,7 +100,7 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
               {isActive && (
                 <span
                   className={cn(
-                    'text-h5 md:text-h4 !font-mono',
+                    'hidden md:inline text-h5 md:text-h4 !font-mono',
                     isPaused ? 'text-ods-text-secondary' : 'text-ods-text-primary',
                   )}
                 >
@@ -141,5 +145,5 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
-  )
+  );
 }

package/src/components/navigation/app-header.tsx

@@ -1,54 +1,55 @@
-'use client'
+'use client';
 
-import React from 'react'
-import { useMdUp } from '../../hooks/ui/use-media-query'
-import { cn } from '../../utils/cn'
-import { useOptionalNotifications } from '../features/notifications/notifications-context'
-import { TimeTrackerHeaderButton } from '../features/time-tracker'
-import { LogOutIcon, OpenFrameLogo, OpenFrameText, UserIcon } from '../icons'
-import { BellIcon } from '../icons-v2-generated/interface/bell-icon'
-import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui'
-import { HeaderButton } from './header-button'
-import { HeaderGlobalSearch } from './header-global-search'
-import { HeaderMingoButton } from './header-mingo-button'
-import { HeaderOrganizationFilter } from './header-organization-filter'
+import React from 'react';
+import { useMdUp } from '../../hooks/ui/use-media-query';
+import { cn } from '../../utils/cn';
+import { useOptionalNotifications } from '../features/notifications/notifications-context';
+import { TimeTrackerHeaderButton } from '../features/time-tracker';
+import { LogOutIcon, OpenFrameLogo, OpenFrameText, UserIcon } from '../icons';
+import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated';
+import { BellIcon } from '../icons-v2-generated/interface/bell-icon';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui';
+import { HeaderButton } from './header-button';
+import { HeaderGlobalSearch } from './header-global-search';
+import { HeaderMingoButton } from './header-mingo-button';
+import { HeaderOrganizationFilter } from './header-organization-filter';
+import { TopNavigation } from './top-navigation';
 
 export interface AppHeaderProps {
-  showSearch?: boolean
-  onSearch?: (query: string) => void
-  showOrganizations?: boolean
-  organizations?: { id: string; name: string }[]
-  selectedOrgId?: string
-  onOrgChange?: (id: string) => void
-  showNotifications?: boolean
-  unreadCount?: number
+  showSearch?: boolean;
+  onSearch?: (query: string) => void;
+  showOrganizations?: boolean;
+  organizations?: { id: string; name: string }[];
+  selectedOrgId?: string;
+  onOrgChange?: (id: string) => void;
+  showNotifications?: boolean;
+  unreadCount?: number;
   /** Render the time-tracker button + popup. Requires wrapping the app in `<TimeTrackerProvider>`. */
-  showTimeTracker?: boolean
+  showTimeTracker?: boolean;
   /** Render the "Mingo AI" launcher button (drawer-style trigger for an
    *  in-layout `AppLayoutDrawer` hosting the chat panel). Defaults to off. */
-  showMingoAI?: boolean
+  showMingoAI?: boolean;
   /** Click handler for the Mingo AI button — typically toggles the drawer. */
-  onMingoAI?: () => void
+  onMingoAI?: () => void;
   /** Whether the Mingo drawer is currently open (visually pressed state). */
-  isMingoAIActive?: boolean
+  isMingoAIActive?: boolean;
   // User block
-  showUser?: boolean
-  userName?: string
-  userEmail?: string
-  userAvatarUrl?: string | null
-  onProfile?: () => void
-  onLogout?: () => void
-  className?: string
+  showUser?: boolean;
+  userName?: string;
+  userEmail?: string;
+  userAvatarUrl?: string | null;
+  onProfile?: () => void;
+  onLogout?: () => void;
+  className?: string;
   /** Whether the mobile menu is open */
-  isMobileMenuOpen: boolean
+  isMobileMenuOpen: boolean;
   /** Callback to toggle mobile menu */
-  onToggleMobileMenu?: () => void
+  onToggleMobileMenu?: () => void;
   /**
    * When true, all header controls are disabled and visually dimmed
    * EXCEPT the mobile burger menu toggle, which remains interactive.
    */
-  disabled?: boolean
+  disabled?: boolean;
 }
 
 export const AppHeader = React.memo(function AppHeader({
@@ -75,180 +76,173 @@ export const AppHeader = React.memo(function AppHeader({
   onToggleMobileMenu,
   disabled = false,
 }: AppHeaderProps) {
-  const isMdUp = useMdUp() ?? false
+  const isMdUp = useMdUp() ?? false;
 
-  const dimmedClass = disabled ? 'pointer-events-none opacity-50' : ''
+  const dimmedClass = disabled ? 'pointer-events-none opacity-50' : '';
+  // Cells carry their own dividers in the unified TopNavigation model
+  // (the shell no longer applies divide-x).
+  const cellDivider = 'border-l border-ods-border';
 
   return (
-    <header
-      className={cn(
-        'flex items-center w-full sticky top-0 z-40 border-b border-ods-border bg-ods-card h-12 md:h-14 divide-x divide-ods-border',
-        className
-      )}
-    >
-      {/* Mobile: Burger Menu Button */}
-      {!isMdUp && <HeaderButton
-        onClick={onToggleMobileMenu}
-        isActive={isMobileMenuOpen}
-        icon={isMobileMenuOpen ? <XmarkIcon className="w-4 h-4" /> : <Menu01Icon className="w-4 h-4" />}
-        aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
-        aria-expanded={isMobileMenuOpen}
-      />}
-
-      {/* Mobile: Logo section */}
-      {!isMdUp && <div className="flex items-center gap-2 px-3 h-full flex-1">
-        <OpenFrameLogo
-          className="w-6 h-6 shrink-0"
-          upperPathColor="var(--color-text-primary)"
-          lowerPathColor="var(--color-accent-primary)"
-        />
-        <OpenFrameText textColor="var(--color-text-primary)" className="h-4" />
-      </div>}
-
-      {/* Desktop: Global Search */}
-      {showSearch ? (
-        <HeaderGlobalSearch
-          onSubmit={onSearch}
-          className={cn("hidden md:flex", dimmedClass)}
-        />
-      ) : <div className="hidden md:flex w-full" />}
-
-      {/* Mobile: Search button */}
-      {showSearch && (
-        <HeaderButton
-          icon={<SearchIcon className="w-4 h-4 md:w-6 md:h-6" />}
-          aria-label="Search"
-          className={cn("md:hidden", dimmedClass)}
-          disabled={disabled}
-        />
-      )}
-
-      {/* Desktop: Organizations filter */}
-      {showOrganizations && (
-        <HeaderOrganizationFilter
-          organizations={organizations}
-          selectedOrgId={selectedOrgId}
-          onOrgChange={onOrgChange}
-          className={cn("hidden lg:flex", dimmedClass)}
-        />
-      )}
+    <TopNavigation
+      className={cn('sticky top-0 z-40', className)}
+      centerBreakpoint="md"
+      leading={
+        // Mobile: Burger Menu Button
+        !isMdUp && (
+          <HeaderButton
+            onClick={onToggleMobileMenu}
+            isActive={isMobileMenuOpen}
+            icon={isMobileMenuOpen ? <XmarkIcon className="w-4 h-4" /> : <Menu01Icon className="w-4 h-4" />}
+            aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={isMobileMenuOpen}
+            className="border-r border-ods-border"
+          />
+        )
+      }
+      logo={
+        !isMdUp && (
+          <>
+            <OpenFrameLogo
+              className="w-6 h-6 shrink-0"
+              upperPathColor="var(--color-text-primary)"
+              lowerPathColor="var(--color-accent-primary)"
+            />
+            <OpenFrameText textColor="var(--color-text-primary)" className="h-4" />
+          </>
+        )
+      }
+      logoClassName="gap-2"
+      center={showSearch ? <HeaderGlobalSearch onSubmit={onSearch} className={cn('w-full', dimmedClass)} /> : undefined}
+      sideActions={
+        <>
+          {/* Mobile: Search button */}
+          {showSearch && (
+            <HeaderButton
+              icon={<SearchIcon className="w-4 h-4 md:w-6 md:h-6" />}
+              aria-label="Search"
+              className={cn('md:hidden', cellDivider, dimmedClass)}
+              disabled={disabled}
+            />
+          )}
 
-      {/* Time tracker button */}
-      {showTimeTracker && (
-        <TimeTrackerHeaderButton disabled={disabled} className={dimmedClass} />
-      )}
+          {/* Desktop: Organizations filter (carries its own border-l) */}
+          {showOrganizations && (
+            <HeaderOrganizationFilter
+              organizations={organizations}
+              selectedOrgId={selectedOrgId}
+              onOrgChange={onOrgChange}
+              className={cn('hidden lg:flex', dimmedClass)}
+            />
+          )}
 
-      {/* Notifications button */}
-      {showNotifications && (
-        <NotificationsHeaderButton
-          fallbackUnreadCount={unreadCount}
-          disabled={disabled}
-          dimmedClass={dimmedClass}
-        />
-      )}
+          {/* Time tracker button */}
+          {showTimeTracker && <TimeTrackerHeaderButton disabled={disabled} className={cn(cellDivider, dimmedClass)} />}
 
-      {isMdUp && showUser && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild disabled={disabled}>
-            <HeaderButton
-              icon={<SquareAvatar
-                src={userAvatarUrl || undefined}
-                alt={userName || 'User'}
-                size="sm"
-                variant="round"
-                className="shrink-0 w-8 h-8 md:w-10 md:h-10"
-              />}
-              aria-label="User"
+          {/* Notifications button */}
+          {showNotifications && (
+            <NotificationsHeaderButton
+              fallbackUnreadCount={unreadCount}
               disabled={disabled}
-              className={cn(
-                'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
-                dimmedClass,
-              )}
+              dimmedClass={cn(cellDivider, dimmedClass)}
             />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            // z-[104] — above the in-layout AppLayoutDrawer panel (z-[103]) so the
-            // user menu stays clickable while the Mingo AI drawer is open
-            className="w-[280px] p-0 bg-ods-bg border-ods-border rounded-[6px] overflow-hidden z-[104]"
-          >
-            {/* User info header section */}
-            <div className="bg-ods-card border-b border-ods-border p-3 flex items-center gap-2">
-              <SquareAvatar
-                src={userAvatarUrl || undefined}
-                alt={userName || 'User'}
-                size="sm"
-                variant="round"
-                className="shrink-0"
-              />
-              <div className="flex-1 min-w-0">
-                {userName && (
-                  <div className="text-h4 text-ods-text-primary truncate">
-                    {userName}
-                  </div>
-                )}
-                {userEmail && (
-                  <div className="text-h6 text-ods-text-secondary truncate">
-                    {userEmail}
+          )}
+
+          {isMdUp && showUser && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild disabled={disabled}>
+                <HeaderButton
+                  icon={
+                    <SquareAvatar
+                      src={userAvatarUrl || undefined}
+                      alt={userName || 'User'}
+                      size="sm"
+                      variant="round"
+                      className="shrink-0 w-8 h-8 md:w-10 md:h-10"
+                    />
+                  }
+                  aria-label="User"
+                  disabled={disabled}
+                  className={cn(
+                    'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+                    cellDivider,
+                    dimmedClass,
+                  )}
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                // z-[104] — above the in-layout AppLayoutDrawer panel (z-[103]) so the
+                // user menu stays clickable while the Mingo AI drawer is open
+                className="w-[280px] p-0 bg-ods-bg border-ods-border rounded-[6px] overflow-hidden z-[104]"
+              >
+                {/* User info header section */}
+                <div className="bg-ods-card border-b border-ods-border p-3 flex items-center gap-2">
+                  <SquareAvatar
+                    src={userAvatarUrl || undefined}
+                    alt={userName || 'User'}
+                    size="sm"
+                    variant="round"
+                    className="shrink-0"
+                  />
+                  <div className="flex-1 min-w-0">
+                    {userName && <div className="text-h4 text-ods-text-primary truncate">{userName}</div>}
+                    {userEmail && <div className="text-h6 text-ods-text-secondary truncate">{userEmail}</div>}
                   </div>
-                )}
-              </div>
-            </div>
+                </div>
 
-            {/* Menu items */}
-            <DropdownMenuItem
-              onClick={onProfile}
-              className="bg-ods-card border-b border-ods-border rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
-            >
-              <div className="flex items-center gap-2">
-                <UserIcon className="h-6 w-6 text-ods-text-primary shrink-0" />
-                <span className="text-h4 text-ods-text-primary">Profile Settings</span>
-              </div>
-            </DropdownMenuItem>
+                {/* Menu items */}
+                <DropdownMenuItem
+                  onClick={onProfile}
+                  className="bg-ods-card border-b border-ods-border rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
+                >
+                  <div className="flex items-center gap-2">
+                    <UserIcon className="h-6 w-6 text-ods-text-primary shrink-0" />
+                    <span className="text-h4 text-ods-text-primary">Profile Settings</span>
+                  </div>
+                </DropdownMenuItem>
 
-            <DropdownMenuItem
-              onClick={onLogout}
-              className="bg-ods-card rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
-            >
-              <div className="flex items-center gap-2">
-                <LogOutIcon className="text-ods-error shrink-0" size={24} />
-                <span className="text-h4 text-ods-text-primary">Log Out</span>
-              </div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
+                <DropdownMenuItem
+                  onClick={onLogout}
+                  className="bg-ods-card rounded-none px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80 cursor-pointer"
+                >
+                  <div className="flex items-center gap-2">
+                    <LogOutIcon className="text-ods-error shrink-0" size={24} />
+                    <span className="text-h4 text-ods-text-primary">Log Out</span>
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
 
-      {/* Mingo AI launcher — anchored at the very end of the header. On mobile
+          {/* Mingo AI launcher — anchored at the very end of the header. On mobile
           it collapses to an icon-only affordance (no "Mingo AI" wordmark). */}
-      {showMingoAI && (
-        <HeaderMingoButton
-          onClick={onMingoAI}
-          isActive={isMingoAIActive}
-          iconOnly={!isMdUp}
-          disabled={disabled || !onMingoAI}
-          className={dimmedClass}
-        />
-      )}
-    </header>
-  )
-})
+          {showMingoAI && (
+            <HeaderMingoButton
+              onClick={onMingoAI}
+              isActive={isMingoAIActive}
+              iconOnly={!isMdUp}
+              disabled={disabled || !onMingoAI}
+              className={cn(cellDivider, dimmedClass)}
+            />
+          )}
+        </>
+      }
+    />
+  );
+});
 
 interface NotificationsHeaderButtonProps {
-  fallbackUnreadCount: number
-  disabled: boolean
-  dimmedClass: string
+  fallbackUnreadCount: number;
+  disabled: boolean;
+  dimmedClass: string;
 }
 
-function NotificationsHeaderButton({
-  fallbackUnreadCount,
-  disabled,
-  dimmedClass,
-}: NotificationsHeaderButtonProps) {
-  const ctx = useOptionalNotifications()
-  const hasUnread = (ctx?.unreadCount ?? fallbackUnreadCount) > 0
-  const isActive = ctx?.isOpen ?? false
-  const onClick = ctx?.toggle
+function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass }: NotificationsHeaderButtonProps) {
+  const ctx = useOptionalNotifications();
+  const hasUnread = (ctx?.unreadCount ?? fallbackUnreadCount) > 0;
+  const isActive = ctx?.isOpen ?? false;
+  const onClick = ctx?.toggle;
 
   return (
     <HeaderButton
@@ -259,9 +253,7 @@ function NotificationsHeaderButton({
           <div className="relative w-4 h-4 md:w-6 md:h-6">
             <BellIcon className="w-full h-full" />
             {hasUnread && (
-              <span
-                className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
-              />
+              <span className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2" />
             )}
           </div>
         )
@@ -272,7 +264,7 @@ function NotificationsHeaderButton({
       disabled={disabled || !onClick}
       className={dimmedClass}
     />
-  )
+  );
 }
 
-export default AppHeader
+export default AppHeader;

package/src/components/navigation/header-button.tsx

@@ -26,7 +26,9 @@ export function HeaderButton({
         "w-12 h-full md:w-14",
         isActive
           ? "text-ods-text-primary bg-ods-bg-active"
-          : "text-ods-text-secondary bg-ods-card hover:bg-ods-bg-hover",
+          : // Transparent at rest so the cell inherits the bar's background
+            // (TopNavigation `backgroundClassName` can differ per platform).
+            "text-ods-text-secondary bg-transparent hover:bg-ods-bg-hover",
         className
       )}
       {...props}

package/src/components/navigation/header-global-search.tsx

@@ -53,7 +53,9 @@ export function HeaderGlobalSearch({
       onSubmit={handleSubmit}
       className={cn(
         "flex flex-1 items-center gap-2 h-full px-3",
-        "bg-ods-card",
+        // Transparent so the cell inherits the bar's background
+        // (TopNavigation `backgroundClassName` can differ per platform).
+        "bg-transparent",
         className
       )}
     >

package/src/components/navigation/header-mingo-button.tsx

@@ -41,7 +41,9 @@ export function HeaderMingoButton({
         'flex items-center shrink-0 h-full gap-2 px-4',
         'transition-colors duration-200',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
-        'text-ods-text-primary bg-ods-card hover:bg-ods-bg-hover',
+        // Transparent at rest so the cell inherits the bar's background
+        // (TopNavigation `backgroundClassName` can differ per platform).
+        'text-ods-text-primary bg-transparent hover:bg-ods-bg-hover',
         className,
       )}
       {...props}

package/src/components/navigation/header-organization-filter.tsx

@@ -40,7 +40,8 @@ export function HeaderOrganizationFilter({
         <button
           className={cn(
             "flex items-center gap-4 h-full px-4",
-            "bg-ods-card border-l border-ods-border",
+            // Transparent so the cell inherits the bar's background.
+            "bg-transparent border-l border-ods-border",
             "w-[240px] shrink-0",
             "hover:bg-ods-bg-hover transition-colors",
             className