From 4dcf35bd03f557a560d1cb313d604a392a9355b9 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 12 Oct 2026 08:54:55 +0200
Subject: [PATCH] Make the dashboard dropdowns consistent

- Show a checkmark on the selected option in all dropdowns.
- Use the same row padding, icon position and section title in all
  dropdowns. Adjust the widths of the dropdown panels.
- Show the graph intervals as a list in the options menu. The menu
  closes when you select an interval.
- Use lighter font weights in the tabs, the segment menu and the date
  picker.
---
 assets/css/flatpickr-colors.css               |  2 +-
 assets/js/dashboard/components/popover.tsx    | 12 ++++-
 .../components/segmented-control.tsx          | 53 ------------------
 assets/js/dashboard/components/tabs.tsx       | 43 +++++++--------
 .../extra/exploration/exploration-column.tsx  |  5 +-
 .../nav-menu/dashboard-options-menu.tsx       | 30 +++++++----
 .../query-periods/comparison-period-menu.tsx  | 18 ++++++-
 .../query-periods/dashboard-period-menu.tsx   | 14 +++--
 .../nav-menu/segments/segment-pill-menu.tsx   |  2 +-
 .../nav-menu/segments/segments-submenu.tsx    | 11 ++--
 assets/js/dashboard/nav-menu/submenu.tsx      |  5 +-
 assets/js/dashboard/site-switcher.tsx         | 22 ++++++--
 .../js/dashboard/stats/behaviours/index.tsx   |  4 +-
 .../dashboard/stats/csv-export/csv-export.tsx |  2 +-
 .../dashboard/stats/graph/interval-picker.tsx | 54 ++++++++++++-------
 assets/js/dashboard/stats/pages/index.tsx     |  4 +-
 e2e/tests/dashboard/top-stats.spec.ts         |  1 +
 17 files changed, 151 insertions(+), 131 deletions(-)
 delete mode 100644 assets/js/dashboard/components/segmented-control.tsx

diff --git a/assets/css/flatpickr-colors.css b/assets/css/flatpickr-colors.css
index 85dd0968edb5..6083d90e6010 100644
--- a/assets/css/flatpickr-colors.css
+++ b/assets/css/flatpickr-colors.css
@@ -147,7 +147,7 @@ span.flatpickr-weekday {
 /* Day cells */
 .flatpickr-day {
   @apply mx-0 my-px h-9 max-w-none rounded-md border border-transparent
-    bg-transparent text-sm font-medium leading-[35px]
+    bg-transparent text-sm font-normal leading-[35px]
     text-gray-800 dark:text-gray-100;
 }
 
diff --git a/assets/js/dashboard/components/popover.tsx b/assets/js/dashboard/components/popover.tsx
index d5f691ac3c66..08629c96622c 100644
--- a/assets/js/dashboard/components/popover.tsx
+++ b/assets/js/dashboard/components/popover.tsx
@@ -46,7 +46,7 @@ const toggleButton = {
   }
 }
 
-const staticRow = 'px-4 py-2.5 text-sm rounded-md'
+const staticRow = 'px-3 py-2 text-sm rounded-md'
 
 const navigationLink = classNames(
   'flex items-center justify-between',
@@ -72,10 +72,15 @@ const items = {
     navigationLink,
     hoverLink,
     label: 'flex-1 min-w-0 truncate',
+    /** Use with a width. Keeps an svg icon on the first line of the row. */
+    rowIcon: 'shrink-0 self-start h-lh',
     description: 'font-normal text-xs text-gray-500 dark:text-gray-400',
+    sectionTitle:
+      'px-3 py-2 text-xs font-medium uppercase whitespace-nowrap text-gray-500 dark:text-gray-400',
     /** Full-width row that holds a leading icon and a `label` span. */
     iconRow: classNames(navigationLink, hoverLink, 'gap-x-2 w-full text-left'),
     selectedOption: classNames(
+      'gap-x-2',
       'data-[selected=true]:bg-gray-100',
       'data-[selected=true]:dark:bg-gray-700',
       'data-[selected=true]:text-gray-900',
@@ -96,7 +101,10 @@ export function SelectedCheckmark({ selected }: { selected: boolean }) {
     return null
   }
   return (
-    <CheckIcon className="size-3.5 shrink-0 ml-2 stroke-2" aria-hidden="true" />
+    <CheckIcon
+      className={classNames('w-3.5', items.classNames.rowIcon)}
+      aria-hidden="true"
+    />
   )
 }
 
diff --git a/assets/js/dashboard/components/segmented-control.tsx b/assets/js/dashboard/components/segmented-control.tsx
deleted file mode 100644
index 99dca5756ab9..000000000000
--- a/assets/js/dashboard/components/segmented-control.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export type SegmentedControlOption<T extends string> = {
-  value: T
-  label: string
-}
-
-export function SegmentedControl<T extends string>({
-  options,
-  selected,
-  onSelect,
-  ariaLabel,
-  getTestId
-}: {
-  options: SegmentedControlOption<T>[]
-  selected: T
-  onSelect: (value: T) => void
-  ariaLabel: string
-  getTestId?: (value: T, isSelected: boolean) => string | undefined
-}) {
-  return (
-    <div
-      role="group"
-      aria-label={ariaLabel}
-      className="inline-flex items-stretch rounded-lg border border-gray-300 p-0.5 dark:border-gray-600"
-    >
-      {options.map(({ value, label }) => {
-        const isSelected = value === selected
-        return (
-          <button
-            key={value}
-            type="button"
-            title={label}
-            aria-pressed={isSelected}
-            aria-label={label}
-            onClick={() => onSelect(value)}
-            data-testid={getTestId?.(value, isSelected)}
-            data-selected={isSelected}
-            className={classNames(
-              'flex-1 whitespace-nowrap rounded-md py-1 px-1.5 text-xs font-medium transition-colors',
-              isSelected
-                ? 'bg-gray-150 text-gray-900 dark:bg-gray-600/80 dark:text-gray-100'
-                : 'text-gray-500 dark:text-gray-300'
-            )}
-          >
-            {label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx
index 23ad648c85d3..f3c71152ecd6 100644
--- a/assets/js/dashboard/components/tabs.tsx
+++ b/assets/js/dashboard/components/tabs.tsx
@@ -2,7 +2,7 @@ import { Popover, Transition } from '@headlessui/react'
 import classNames from 'classnames'
 import React, { ReactNode, useRef, useEffect } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { popover, BlurMenuButtonOnEscape } from './popover'
+import { popover, BlurMenuButtonOnEscape, SelectedCheckmark } from './popover'
 import { useSearchableItems } from '../hooks/use-searchable-items'
 import { SearchInput } from './search-input'
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
@@ -16,7 +16,7 @@ export const TabWrapper = ({
 }) => (
   <div
     className={classNames(
-      'flex items-baseline gap-x-3.5 text-xs font-medium text-gray-500 dark:text-gray-400',
+      'flex items-baseline gap-x-3.5 text-xs text-gray-500 dark:text-gray-400',
       className
     )}
   >
@@ -175,19 +175,17 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
   }, [searchable, showSearch, searchRef])
 
   return (
-    <>
+    <div className="flex flex-col gap-y-1">
       {searchable && showSearch && (
-        <div className="flex items-center p-1">
-          <SearchInput
-            searchRef={searchRef}
-            className="!max-w-none"
-            onSearch={handleSearchInput}
-          />
-        </div>
+        <SearchInput
+          searchRef={searchRef}
+          className="!max-w-none"
+          onSearch={handleSearchInput}
+        />
       )}
       <div
         data-testid="dropdown-items"
-        className={'max-h-[224px] overflow-y-auto flex flex-col gap-y-0.5 p-1'}
+        className={'max-h-[224px] overflow-y-auto flex flex-col gap-y-0.5'}
       >
         {showableData.map(({ selected, label, onClick }, index) => {
           return (
@@ -201,6 +199,7 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
               className={itemClassName}
             >
               <span className="line-clamp-1">{label}</span>
+              <SelectedCheckmark selected={selected} />
             </button>
           )
         })}
@@ -213,24 +212,22 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
             )}
           >
             {`Show ${countOfMoreToShow} more`}
-            <EllipsisHorizontalIcon className="block w-5 h-5" />
+            <EllipsisHorizontalIcon
+              className={classNames('w-5', popover.items.classNames.rowIcon)}
+            />
           </button>
         )}
         {searching && !filteredData.length && (
-          <button
-            className={classNames(
-              itemClassName,
-              'w-full text-left !justify-start'
-            )}
-            onClick={handleClearSearch}
-          >
-            No items found.{' '}
-            <span className="ml-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500">
-              Click to clear search.
+          <button className={itemClassName} onClick={handleClearSearch}>
+            <span>
+              No items found.{' '}
+              <span className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500">
+                Click to clear search.
+              </span>
             </span>
           </button>
         )}
       </div>
-    </>
+    </div>
   )
 }
diff --git a/assets/js/dashboard/extra/exploration/exploration-column.tsx b/assets/js/dashboard/extra/exploration/exploration-column.tsx
index 7ae7700da1a8..0a62221d6fb1 100644
--- a/assets/js/dashboard/extra/exploration/exploration-column.tsx
+++ b/assets/js/dashboard/extra/exploration/exploration-column.tsx
@@ -8,7 +8,7 @@ import {
   roundedNumberFormatter
 } from '../../util/number-formatter'
 import { CursorIcon, FolderIcon } from '../../components/icons'
-import { popover } from '../../components/popover'
+import { popover, SelectedCheckmark } from '../../components/popover'
 import {
   ChevronUpDownIcon,
   EllipsisHorizontalIcon
@@ -69,7 +69,7 @@ function DirectionDropdown({
 
       {open && (
         <div
-          className={`absolute -left-1 top-full mt-1 z-10 min-w-40 dark:!bg-gray-900 ${popover.panel.classNames.roundedSheet}`}
+          className={`absolute -left-1 top-full mt-1 z-10 min-w-44 dark:!bg-gray-900 ${popover.panel.classNames.roundedSheet}`}
         >
           {DIRECTION_OPTIONS.map(({ value, label }) => (
             <button
@@ -83,6 +83,7 @@ function DirectionDropdown({
               className={`w-full text-left text-sm rounded-md dark:hover:!bg-gray-750 data-[selected=true]:dark:!bg-gray-750 ${popover.items.classNames.navigationLink} ${popover.items.classNames.hoverLink} ${direction === value ? popover.items.classNames.selectedOption : ''}`}
             >
               {label}
+              <SelectedCheckmark selected={direction === value} />
             </button>
           ))}
         </div>
diff --git a/assets/js/dashboard/nav-menu/dashboard-options-menu.tsx b/assets/js/dashboard/nav-menu/dashboard-options-menu.tsx
index b9a0390ea4fb..f844fda6f7e9 100644
--- a/assets/js/dashboard/nav-menu/dashboard-options-menu.tsx
+++ b/assets/js/dashboard/nav-menu/dashboard-options-menu.tsx
@@ -15,6 +15,7 @@ import { isModifierPressed, isTyping, Keybind } from '../keybinding'
 import { useMatch } from 'react-router-dom'
 import { rootRoute } from '../router'
 import { CsvExport, ExportStatus } from '../stats/csv-export/csv-export'
+import { MenuSeparator } from './nav-menu-components'
 
 function ImportedSwitchItem({ disabled }: { disabled: boolean }) {
   const { dashboardState } = useDashboardStateContext()
@@ -41,7 +42,11 @@ function ImportedSwitchItem({ disabled }: { disabled: boolean }) {
   )
 }
 
-function DashboardOptionsMenuItems() {
+function DashboardOptionsMenuItems({
+  closeDropdown
+}: {
+  closeDropdown: () => void
+}) {
   const { dashboardState } = useDashboardStateContext()
   const { selectedInterval, onIntervalClick, availableIntervals } =
     useGraphIntervalContext()
@@ -95,17 +100,20 @@ function DashboardOptionsMenuItems() {
         className={classNames(popover.transition.classNames.right, 'mt-2')}
       >
         <Popover.Panel
-          className={classNames(
-            popover.panel.classNames.roundedSheet,
-            'min-w-72'
-          )}
+          className={classNames(popover.panel.classNames.roundedSheet, 'w-56')}
         >
           {showIntervalSection && (
-            <IntervalPicker
-              selectedInterval={selectedInterval}
-              onIntervalClick={onIntervalClick}
-              options={availableIntervals}
-            />
+            <>
+              <IntervalPicker
+                selectedInterval={selectedInterval}
+                onIntervalClick={(interval) => {
+                  onIntervalClick(interval)
+                  closeDropdown()
+                }}
+                options={availableIntervals}
+              />
+              <MenuSeparator />
+            </>
           )}
           <CsvExport
             exportStatus={exportStatus}
@@ -162,7 +170,7 @@ export function DashboardOptionsMenu() {
 
   return (
     <Popover className="md:relative">
-      {() => <DashboardOptionsMenuItems />}
+      {({ close }) => <DashboardOptionsMenuItems closeDropdown={close} />}
     </Popover>
   )
 }
diff --git a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
index cace8bd9bc0c..40d5c3f86271 100644
--- a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
@@ -17,7 +17,11 @@ import {
   getSearchToApplyCustomComparisonDates
 } from '../../dashboard-time-periods'
 import { Popover, Transition } from '@headlessui/react'
-import { popover, BlurMenuButtonOnEscape } from '../../components/popover'
+import {
+  popover,
+  BlurMenuButtonOnEscape,
+  SelectedCheckmark
+} from '../../components/popover'
 import {
   DateMenuCalendarIcon,
   PopoverMenuProps,
@@ -69,6 +73,9 @@ export const ComparisonPeriodMenuItems = ({
             onClick={closeDropdown}
           >
             {COMPARISON_MODES[comparisonMode]}
+            <SelectedCheckmark
+              selected={dashboardState.comparison === comparisonMode}
+            />
           </AppNavigationLink>
         ))}
         <AppNavigationLink
@@ -78,6 +85,9 @@ export const ComparisonPeriodMenuItems = ({
           onClick={toggleCalendar}
         >
           {COMPARISON_MODES[ComparisonMode.custom]}
+          <SelectedCheckmark
+            selected={dashboardState.comparison === ComparisonMode.custom}
+          />
         </AppNavigationLink>
         {dashboardState.comparison !== ComparisonMode.custom && (
           <>
@@ -89,6 +99,9 @@ export const ComparisonPeriodMenuItems = ({
               onClick={closeDropdown}
             >
               {COMPARISON_MATCH_MODE_LABELS[ComparisonMatchMode.MatchDayOfWeek]}
+              <SelectedCheckmark
+                selected={dashboardState.match_day_of_week === true}
+              />
             </AppNavigationLink>
             <AppNavigationLink
               data-selected={dashboardState.match_day_of_week === false}
@@ -97,6 +110,9 @@ export const ComparisonPeriodMenuItems = ({
               onClick={closeDropdown}
             >
               {COMPARISON_MATCH_MODE_LABELS[ComparisonMatchMode.MatchExactDate]}
+              <SelectedCheckmark
+                selected={dashboardState.match_day_of_week === false}
+              />
             </AppNavigationLink>
           </>
         )}
diff --git a/assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx
index 0ca5bbabe696..9616250369d3 100644
--- a/assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx
@@ -25,7 +25,11 @@ import {
 import { useMatch } from 'react-router-dom'
 import { rootRoute } from '../../router'
 import { Popover, Transition } from '@headlessui/react'
-import { popover, BlurMenuButtonOnEscape } from '../../components/popover'
+import {
+  popover,
+  BlurMenuButtonOnEscape,
+  SelectedCheckmark
+} from '../../components/popover'
 import {
   DateMenuCalendarIcon,
   PopoverMenuProps,
@@ -198,15 +202,19 @@ const DashboardPeriodMenuInner = ({
                   { search, isActive, onEvent, hidden }
                 ]) => {
                   if (!hidden) {
+                    const selected = isActive({ site, dashboardState })
                     return (
                       <AppNavigationLink
                         key={label}
-                        data-selected={isActive({ site, dashboardState })}
+                        data-selected={selected}
                         className={linkClassName}
                         search={search}
                         onClick={onEvent && ((e) => onEvent(e))}
                       >
-                        {label}
+                        <span className={popover.items.classNames.label}>
+                          {label}
+                        </span>
+                        <SelectedCheckmark selected={selected} />
                         {!!keyboardKey && (
                           <KeybindHint>{keyboardKey}</KeybindHint>
                         )}
diff --git a/assets/js/dashboard/nav-menu/segments/segment-pill-menu.tsx b/assets/js/dashboard/nav-menu/segments/segment-pill-menu.tsx
index 1db2f26c8173..fb338644284b 100644
--- a/assets/js/dashboard/nav-menu/segments/segment-pill-menu.tsx
+++ b/assets/js/dashboard/nav-menu/segments/segment-pill-menu.tsx
@@ -61,7 +61,7 @@ const SegmentFilters = ({ segment }: { segment: SavedSegments[number] }) => (
 const SegmentTitle = ({ segment }: { segment: SavedSegments[number] }) => {
   const user = useUserContext()
   return (
-    <div className="flex flex-col flex-1 min-w-0 gap-y-0.5 font-semibold">
+    <div className="flex flex-col flex-1 min-w-0 gap-y-0.5 font-medium">
       <span className="truncate" title={segment.name}>
         {segment.name}
       </span>
diff --git a/assets/js/dashboard/nav-menu/segments/segments-submenu.tsx b/assets/js/dashboard/nav-menu/segments/segments-submenu.tsx
index 1b4b4a207817..12a8d905e348 100644
--- a/assets/js/dashboard/nav-menu/segments/segments-submenu.tsx
+++ b/assets/js/dashboard/nav-menu/segments/segments-submenu.tsx
@@ -16,7 +16,7 @@ import { AppNavigationLink } from '../../navigation/use-app-navigate'
 import { Role, useUserContext } from '../../user-context'
 import { useSegmentsContext } from '../../filtering/segments-context'
 import { useSearchableItems } from '../../hooks/use-searchable-items'
-import { popover } from '../../components/popover'
+import { popover, SelectedCheckmark } from '../../components/popover'
 
 const mutedRowClassName = classNames(
   popover.items.classNames.iconRow,
@@ -80,7 +80,7 @@ export const SegmentsSubmenu = ({
   })
 
   return (
-    <>
+    <div className="flex flex-col gap-y-1">
       {showSearch && (
         <SearchInput
           searchRef={searchRef}
@@ -105,7 +105,9 @@ export const SegmentsSubmenu = ({
             <span className={popover.items.classNames.label}>
               {`Show ${countOfMoreToShow} more`}
             </span>
-            <EllipsisHorizontalIcon className="block w-5 h-5 shrink-0" />
+            <EllipsisHorizontalIcon
+              className={classNames('w-5', popover.items.classNames.rowIcon)}
+            />
           </button>
         )}
       </div>
@@ -114,7 +116,7 @@ export const SegmentsSubmenu = ({
           No segments found. Clear search to show all.
         </button>
       )}
-    </>
+    </div>
   )
 }
 
@@ -166,6 +168,7 @@ const SegmentLink = ({
           </span>
         </div>
       </div>
+      <SelectedCheckmark selected={selected} />
     </AppNavigationLink>
   )
 }
diff --git a/assets/js/dashboard/nav-menu/submenu.tsx b/assets/js/dashboard/nav-menu/submenu.tsx
index c7c4e980dfa3..8a78b8ae40cd 100644
--- a/assets/js/dashboard/nav-menu/submenu.tsx
+++ b/assets/js/dashboard/nav-menu/submenu.tsx
@@ -13,7 +13,10 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { popover } from '../components/popover'
 import { MenuSeparator } from './nav-menu-components'
 
-export const submenuIconClassName = 'size-4 shrink-0'
+export const submenuIconClassName = classNames(
+  'w-4',
+  popover.items.classNames.rowIcon
+)
 
 const SUBMENU_CLOSE_DELAY_MS = 150
 
diff --git a/assets/js/dashboard/site-switcher.tsx b/assets/js/dashboard/site-switcher.tsx
index fddc90818f5a..af09d0787878 100644
--- a/assets/js/dashboard/site-switcher.tsx
+++ b/assets/js/dashboard/site-switcher.tsx
@@ -7,7 +7,11 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Cog8ToothIcon, ArrowLeftIcon } from '@heroicons/react/24/outline'
 import classNames from 'classnames'
 import { isModifierPressed, isTyping, Keybind, KeybindHint } from './keybinding'
-import { popover, BlurMenuButtonOnEscape } from './components/popover'
+import {
+  popover,
+  BlurMenuButtonOnEscape,
+  SelectedCheckmark
+} from './components/popover'
 import { ConsolidatedViewIcon, Favicon } from './components/site-icon'
 import { useQuery } from '@tanstack/react-query'
 import { Role, useUserContext } from './user-context'
@@ -23,7 +27,7 @@ const menuItemClassName = classNames(
   popover.items.classNames.navigationLink,
   popover.items.classNames.selectedOption,
   popover.items.classNames.hoverLink,
-  'gap-x-2'
+  'leading-5.5'
 )
 
 const buttonLinkClassName = classNames(
@@ -239,7 +243,12 @@ export const SiteSwitcher = () => {
                   onClick={() => closePopover()}
                 >
                   <ConsolidatedViewIcon />
-                  <span className="truncate mr-auto">All sites</span>
+                  <span className={popover.items.classNames.label}>
+                    All sites
+                  </span>
+                  <SelectedCheckmark
+                    selected={currentSite.isConsolidatedView}
+                  />
                   <KeybindHint>0</KeybindHint>
                 </a>
               )}
@@ -262,7 +271,12 @@ export const SiteSwitcher = () => {
                     }
                   >
                     <Favicon domain={domain} />
-                    <span className="truncate mr-auto">{domain}</span>
+                    <span className={popover.items.classNames.label}>
+                      {domain}
+                    </span>
+                    <SelectedCheckmark
+                      selected={currentSite.domain === domain}
+                    />
                     {sitesInDropdown.length > 1 && (
                       <KeybindHint>{index + 1}</KeybindHint>
                     )}
diff --git a/assets/js/dashboard/stats/behaviours/index.tsx b/assets/js/dashboard/stats/behaviours/index.tsx
index 072c0a5637b0..a2443f78746e 100644
--- a/assets/js/dashboard/stats/behaviours/index.tsx
+++ b/assets/js/dashboard/stats/behaviours/index.tsx
@@ -566,7 +566,7 @@ function Behaviours({
             site.propsAvailable ? (
               <DropdownTabButton
                 className="md:relative"
-                transitionClassName="md:left-auto md:w-88 md:origin-top-right"
+                transitionClassName="md:left-auto md:w-80 md:origin-top-right"
                 active={mode === Mode.PROPS}
                 options={propertyKeys.map((key) => ({
                   label: key,
@@ -591,7 +591,7 @@ function Behaviours({
               (site.funnels.length > 0 && site.funnelsAvailable ? (
                 <DropdownTabButton
                   className="md:relative"
-                  transitionClassName="md:left-auto md:w-88 md:origin-top-right"
+                  transitionClassName="md:left-auto md:w-80 md:origin-top-right"
                   active={mode === Mode.FUNNELS}
                   options={site.funnels.map(({ name }) => ({
                     label: name,
diff --git a/assets/js/dashboard/stats/csv-export/csv-export.tsx b/assets/js/dashboard/stats/csv-export/csv-export.tsx
index b246b5684c6b..ce3c04a2a038 100644
--- a/assets/js/dashboard/stats/csv-export/csv-export.tsx
+++ b/assets/js/dashboard/stats/csv-export/csv-export.tsx
@@ -97,7 +97,7 @@ export function CsvExport({
       ) : exportStatus === ExportStatus.error ? (
         <ExportFailedBubble />
       ) : (
-        <ArrowDownTrayIcon className="size-4 stroke-2" />
+        <ArrowDownTrayIcon className="size-4" />
       )}
     </button>
   )
diff --git a/assets/js/dashboard/stats/graph/interval-picker.tsx b/assets/js/dashboard/stats/graph/interval-picker.tsx
index dd0a103e9e64..db3c3ba7d138 100644
--- a/assets/js/dashboard/stats/graph/interval-picker.tsx
+++ b/assets/js/dashboard/stats/graph/interval-picker.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import classNames from 'classnames'
 import * as storage from '../../util/storage'
-import { SegmentedControl } from '../../components/segmented-control'
+import { popover, SelectedCheckmark } from '../../components/popover'
 import {
   Interval,
   GetIntervalProps,
@@ -133,25 +134,38 @@ export function IntervalPicker({
     return null
   }
 
-  const controlOptions = options.map((value) => ({
-    value,
-    label: INTERVAL_LABELS[value] ?? value
-  }))
-
   return (
-    <div className="flex justify-between items-center gap-x-2 w-full pl-4 pr-2 py-1">
-      <span className="shrink-0 text-sm font-medium text-gray-700 dark:text-gray-100">
-        Graph interval
-      </span>
-      <SegmentedControl
-        ariaLabel="Graph data interval"
-        options={controlOptions}
-        selected={selectedInterval}
-        onSelect={onIntervalClick}
-        getTestId={(_value, isSelected) =>
-          isSelected ? 'current-graph-interval' : 'graph-interval'
-        }
-      />
-    </div>
+    <>
+      <p className={popover.items.classNames.sectionTitle}>Graph interval</p>
+      <div
+        role="group"
+        aria-label="Graph data interval"
+        className="flex flex-col gap-y-0.5"
+      >
+        {options.map((value) => {
+          const selected = value === selectedInterval
+          return (
+            <button
+              key={value}
+              type="button"
+              data-testid={
+                selected ? 'current-graph-interval' : 'graph-interval'
+              }
+              data-selected={selected}
+              aria-pressed={selected}
+              onClick={() => onIntervalClick(value)}
+              className={classNames(
+                popover.items.classNames.navigationLink,
+                popover.items.classNames.selectedOption,
+                popover.items.classNames.hoverLink
+              )}
+            >
+              {INTERVAL_LABELS[value] ?? value}
+              <SelectedCheckmark selected={selected} />
+            </button>
+          )
+        })}
+      </div>
+    </>
   )
 }
diff --git a/assets/js/dashboard/stats/pages/index.tsx b/assets/js/dashboard/stats/pages/index.tsx
index b422ef1f2879..0b3ea1f0f572 100644
--- a/assets/js/dashboard/stats/pages/index.tsx
+++ b/assets/js/dashboard/stats/pages/index.tsx
@@ -196,11 +196,11 @@ function PagesBreakdownMenu({
             {...popover.transition.props}
             className={classNames(
               popover.transition.classNames.right,
-              'mt-2 min-w-48'
+              'mt-2 min-w-52'
             )}
           >
             <Popover.Panel className={popover.panel.classNames.roundedSheet}>
-              <p className="uppercase text-xs font-medium text-gray-500 dark:text-gray-400 px-4 py-2.5 whitespace-nowrap">
+              <p className={popover.items.classNames.sectionTitle}>
                 Break down by
               </p>
               <div
diff --git a/e2e/tests/dashboard/top-stats.spec.ts b/e2e/tests/dashboard/top-stats.spec.ts
index 78c8dadccb08..2f533b0ed03a 100644
--- a/e2e/tests/dashboard/top-stats.spec.ts
+++ b/e2e/tests/dashboard/top-stats.spec.ts
@@ -277,6 +277,7 @@ test('different graph time intervals are available', async ({
   await expect(page.getByTestId('current-graph-interval')).toHaveText('Hours')
   await expect(graphIntervalSegments).toHaveCount(1)
   await graphIntervalSegments.filter({ hasText: 'Min' }).click()
+  await optionsMenu.click()
   await expect(page.getByTestId('current-graph-interval')).toHaveText('Min')
 })