sanne-san · Oct 12, 2026 · Oct 12, 2026
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>