From beb869ff661a314e026d3c0ac6fe459f02814259 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 11:39:52 +0100
Subject: [PATCH 01/23] Improve reports layout

- Create new `ReportLayout` and `ReportHeader` components to ensure consistent layout across reports
- Remove title from report header, and place tabs in the top left corner
- Move the details button to the top right corner, rather than the bottom of the report, to reduce vertical space and improve readability. Reduce it to a simple icon with a 'View details' tooltip.
- Update the Search terms report to use the new `ReportLayout` and `ReportHeader` components.
- Update dashboard to use a simple grid layout, simplifying the html markup and css.
- Change 'Screen sizes' title to 'Devices' in the devices report.
- Change 'Top pages' title to 'Conversion pages' in the pages report, whenever a conversion goal filter is applied.
- Add 'last 30min' pill to the behaviour report when on realtime dashboard, rather than displaying this in the title.
- Remove the Combobox input from the custom properties report, and use the same tab dropdown pattern as used for funnels and UTM campaigns.
---
 assets/css/app.css                            |   4 +
 assets/js/dashboard/components/pill.tsx       |  20 ++
 assets/js/dashboard/components/popover.tsx    |   3 +-
 assets/js/dashboard/components/tabs.tsx       |  78 ++++---
 assets/js/dashboard/extra/funnel.js           |   6 +-
 .../js/dashboard/hooks/use-more-link-data.tsx |  31 +++
 assets/js/dashboard/index.tsx                 |  40 +---
 assets/js/dashboard/nav-menu/top-bar.tsx      |   6 +-
 assets/js/dashboard/site-switcher.tsx         |   4 +-
 .../dashboard/stats/behaviours/conversions.js |   7 +-
 .../stats/behaviours/goal-conversions.js      |  11 +-
 assets/js/dashboard/stats/behaviours/index.js | 208 ++++++++++++++++--
 assets/js/dashboard/stats/behaviours/props.js | 130 ++---------
 assets/js/dashboard/stats/current-visitors.js |   2 +-
 assets/js/dashboard/stats/devices/index.js    | 158 ++++++++++---
 assets/js/dashboard/stats/graph/graph-util.js |  30 +--
 assets/js/dashboard/stats/graph/top-stats.js  |   2 +-
 .../js/dashboard/stats/graph/visitor-graph.js |   2 +-
 assets/js/dashboard/stats/locations/index.js  | 124 ++++++++---
 .../dashboard/stats/locations/map-tooltip.tsx |   7 +-
 assets/js/dashboard/stats/locations/map.tsx   |  53 +++--
 .../stats/modals/devices/screen-sizes.js      |   4 +-
 .../stats/modals/google-keywords.tsx          |   2 +-
 assets/js/dashboard/stats/more-link.js        |  50 +++--
 assets/js/dashboard/stats/pages/index.js      | 103 +++++----
 assets/js/dashboard/stats/reports/list.tsx    |  38 ++--
 .../dashboard/stats/reports/report-header.js  |   9 +
 .../dashboard/stats/reports/report-layout.js  |  15 ++
 .../dashboard/stats/sources/search-terms.tsx  |  38 ++--
 .../js/dashboard/stats/sources/source-list.js | 135 +++++++-----
 30 files changed, 846 insertions(+), 474 deletions(-)
 create mode 100644 assets/js/dashboard/components/pill.tsx
 create mode 100644 assets/js/dashboard/hooks/use-more-link-data.tsx
 create mode 100644 assets/js/dashboard/stats/reports/report-header.js
 create mode 100644 assets/js/dashboard/stats/reports/report-layout.js

diff --git a/assets/css/app.css b/assets/css/app.css
index 71879d553ed0..064bc1523c90 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -31,6 +31,10 @@
   *:focus-visible {
     @apply ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-gray-900 outline-none;
   }
+
+  :focus:not(:focus-visible) {
+    @apply outline-none;
+  }
 }
 
 @layer components {
diff --git a/assets/js/dashboard/components/pill.tsx b/assets/js/dashboard/components/pill.tsx
new file mode 100644
index 000000000000..15bb1d124c1e
--- /dev/null
+++ b/assets/js/dashboard/components/pill.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+
+export type PillProps = {
+  className?: string
+  children: ReactNode
+}
+
+export function Pill({ className, children }: PillProps) {
+  return (
+    <div
+      className={classNames(
+        'flex items-center shrink-0 h-fit rounded-md bg-green-50 dark:bg-green-900/60 text-green-700 dark:text-green-300 text-xs font-medium px-2.5 py-1',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/assets/js/dashboard/components/popover.tsx b/assets/js/dashboard/components/popover.tsx
index 56662badb541..66ca3fc91c2f 100644
--- a/assets/js/dashboard/components/popover.tsx
+++ b/assets/js/dashboard/components/popover.tsx
@@ -55,8 +55,7 @@ const items = {
       'data-[selected=true]:bg-gray-100',
       'data-[selected=true]:dark:bg-gray-700',
       'data-[selected=true]:text-gray-900',
-      'data-[selected=true]:dark:text-gray-100',
-      'data-[selected=true]:font-semibold'
+      'data-[selected=true]:dark:text-gray-100'
     ),
     hoverLink: classNames(
       'hover:bg-gray-100',
diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx
index cc33f7290ca0..5d5670c2bea5 100644
--- a/assets/js/dashboard/components/tabs.tsx
+++ b/assets/js/dashboard/components/tabs.tsx
@@ -1,6 +1,6 @@
 import { Popover, Transition } from '@headlessui/react'
 import classNames from 'classnames'
-import React, { ReactNode, useRef } from 'react'
+import React, { ReactNode, useRef, useEffect } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { popover, BlurMenuButtonOnEscape } from './popover'
 import { useSearchableItems } from '../hooks/use-searchable-items'
@@ -16,7 +16,7 @@ export const TabWrapper = ({
 }) => (
   <div
     className={classNames(
-      'flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2 items-baseline',
+      'flex items-baseline gap-x-3 text-xs font-medium text-gray-500 dark:text-gray-400',
       className
     )}
   >
@@ -32,12 +32,15 @@ const TabButtonText = ({
   active: boolean
 }) => (
   <span
-    className={classNames('truncate text-left transition-colors duration-150', {
-      'hover:text-indigo-700 dark:hover:text-indigo-400 cursor-pointer':
-        !active,
-      'text-indigo-600 dark:text-indigo-500 font-bold underline decoration-2 decoration-indigo-600 dark:decoration-indigo-500':
-        active
-    })}
+    className={classNames(
+      '-mb-px pb-4 truncate text-left text-xs font-semibold uppercase transition-colors duration-150',
+      {
+        'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 cursor-pointer':
+          !active,
+        'border-b-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100':
+          active
+      }
+    )}
   >
     {children}
   </span>
@@ -54,7 +57,10 @@ export const TabButton = ({
   onClick: () => void
   active: boolean
 }) => (
-  <button className={classNames('rounded-sm', className)} onClick={onClick}>
+  <button
+    className={classNames('flex rounded-sm', className)}
+    onClick={onClick}
+  >
     <TabButtonText active={active}>{children}</TabButtonText>
   </button>
 )
@@ -84,11 +90,8 @@ export const DropdownTabButton = ({
           >
             <TabButtonText active={active}>{children}</TabButtonText>
 
-            <div
-              className="flex self-stretch -mr-1 ml-1 items-center"
-              aria-hidden="true"
-            >
-              <ChevronDownIcon className="h-4 w-4" />
+            <div className="ml-1 pb-4" aria-hidden="true">
+              <ChevronDownIcon className="size-4" />
             </div>
           </Popover.Button>
 
@@ -96,7 +99,7 @@ export const DropdownTabButton = ({
             as="div"
             {...popover.transition.props}
             className={classNames(
-              popover.transition.classNames.fullwidth,
+              popover.transition.classNames.left,
               'mt-2',
               transitionClassName
             )}
@@ -115,15 +118,9 @@ type ItemsProps = {
   closeDropdown: () => void
   options: Array<{ selected: boolean; onClick: () => void; label: string }>
   searchable?: boolean
-  collectionTitle?: string
 }
 
-const Items = ({
-  options,
-  searchable,
-  collectionTitle,
-  closeDropdown
-}: ItemsProps) => {
+const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
   const {
     filteredData,
     showableData,
@@ -136,7 +133,7 @@ const Items = ({
     countOfMoreToShow
   } = useSearchableItems({
     data: options,
-    maxItemsInitially: searchable ? 5 : options.length,
+    maxItemsInitially: searchable ? 10 : options.length,
     itemMatchesSearchValue: (option, trimmedSearchString) =>
       option.label.toLowerCase().includes(trimmedSearchString.toLowerCase())
   })
@@ -148,24 +145,32 @@ const Items = ({
     popover.items.classNames.hoverLink
   )
 
+  useEffect(() => {
+    if (searchable && showSearch && searchRef.current) {
+      const timeoutId = setTimeout(() => {
+        searchRef.current?.focus()
+      }, 100)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [searchable, showSearch, searchRef])
+
   return (
     <>
       {searchable && showSearch && (
-        <div className="flex items-center py-2 px-4">
-          {collectionTitle && (
-            <div className="text-sm font-bold uppercase text-indigo-500 dark:text-indigo-400 mr-4">
-              {collectionTitle}
-            </div>
-          )}
+        <div className="flex items-center p-1">
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1"
+            className="w-full !max-w-none"
             onSearch={handleSearchInput}
           />
         </div>
       )}
-      <div className={'max-h-[210px] overflow-y-scroll'}>
+      <div
+        className={
+          'max-h-[224px] overflow-y-scroll flex flex-col gap-y-0.5 p-1'
+        }
+      >
         {showableData.map(({ selected, label, onClick }, index) => {
           return (
             <button
@@ -177,7 +182,7 @@ const Items = ({
               data-selected={selected}
               className={itemClassName}
             >
-              {label}
+              <span className="line-clamp-1">{label}</span>
             </button>
           )
         })}
@@ -186,7 +191,7 @@ const Items = ({
             onClick={handleShowAll}
             className={classNames(
               itemClassName,
-              'w-full text-left font-bold hover:text-indigo-700 dark:hover:text-indigo-500'
+              'w-full text-left text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
             )}
           >
             {`Show ${countOfMoreToShow} more`}
@@ -197,11 +202,14 @@ const Items = ({
           <button
             className={classNames(
               itemClassName,
-              'w-full text-left font-bold hover:text-indigo-700 dark:hover:text-indigo-500'
+              'w-full text-left !justify-start'
             )}
             onClick={handleClearSearch}
           >
-            No items found. Clear search to show all.
+            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.
+            </span>
           </button>
         )}
       </div>
diff --git a/assets/js/dashboard/extra/funnel.js b/assets/js/dashboard/extra/funnel.js
index a2a11cf95db1..a818e02a659c 100644
--- a/assets/js/dashboard/extra/funnel.js
+++ b/assets/js/dashboard/extra/funnel.js
@@ -294,7 +294,9 @@ export default function Funnel({ funnelName, tabs }) {
   const header = () => {
     return (
       <div className="flex justify-between w-full">
-        <h4 className="mt-2 text-sm dark:text-gray-100">{funnelName}</h4>
+        <h4 className="mt-2 text-base font-semibold dark:text-gray-100">
+          {funnelName}
+        </h4>
         {tabs}
       </div>
     )
@@ -346,7 +348,7 @@ export default function Funnel({ funnelName, tabs }) {
       return (
         <div className="mb-8">
           {header()}
-          <p className="mt-1 text-gray-500 text-sm">
+          <p className="mt-0.5 text-gray-500 text-sm">
             {funnel.steps.length}-step funnel • {conversionRate}% conversion
             rate
           </p>
diff --git a/assets/js/dashboard/hooks/use-more-link-data.tsx b/assets/js/dashboard/hooks/use-more-link-data.tsx
new file mode 100644
index 000000000000..e4f086bfec54
--- /dev/null
+++ b/assets/js/dashboard/hooks/use-more-link-data.tsx
@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react'
+import { AppNavigationLinkProps } from '../navigation/use-app-navigate'
+
+export function useMoreLinkData() {
+  const [listData, setListData] = useState<unknown[] | null>(null)
+  const [linkProps, setLinkProps] = useState<AppNavigationLinkProps | null>(
+    null
+  )
+  const [listLoading, setListLoading] = useState(true)
+
+  const onListUpdate = useCallback(
+    (
+      list: unknown[] | null,
+      linkProps: AppNavigationLinkProps | undefined,
+      loading: boolean
+    ) => {
+      setListData(list)
+      setLinkProps(linkProps ?? null)
+      setListLoading(loading)
+    },
+    []
+  )
+
+  const reset = useCallback(() => {
+    setListData(null)
+    setLinkProps(null)
+    setListLoading(true)
+  }, [])
+
+  return { onListUpdate, listData, linkProps, listLoading, reset }
+}
diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx
index d0c6fc0a36ad..72b947896a63 100644
--- a/assets/js/dashboard/index.tsx
+++ b/assets/js/dashboard/index.tsx
@@ -50,37 +50,21 @@ function DashboardStats({
     }
   }, [onLiveNavigate])
 
-  const statsBoxClass =
-    'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0'
-
   return (
     <>
       <VisitorGraph updateImportedDataInView={updateImportedDataInView} />
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
-          <Sources />
-        </div>
-        <div className={statsBoxClass}>
-          {site.flags.live_dashboard ? (
-            <LiveViewPortal
-              id="pages-breakdown-live"
-              className="w-full h-full border-0 overflow-hidden"
-            />
-          ) : (
-            <Pages />
-          )}
-        </div>
-      </div>
-
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
-          <Locations />
-        </div>
-        <div className={statsBoxClass}>
-          <Devices />
-        </div>
-      </div>
+      <Sources />
+      {site.flags.live_dashboard ? (
+        <LiveViewPortal
+          id="pages-breakdown-live"
+          className="w-full h-full border-0 overflow-hidden"
+        />
+      ) : (
+        <Pages />
+      )}
 
+      <Locations />
+      <Devices />
       <Behaviours importedDataInView={importedDataInView} />
     </>
   )
@@ -98,7 +82,7 @@ function Dashboard() {
   const [importedDataInView, setImportedDataInView] = useState(false)
 
   return (
-    <div className="mb-16">
+    <div className="mb-16 grid grid-cols-1 md:grid-cols-2 gap-5">
       <TopBar showCurrentVisitors={!isRealTimeDashboard} />
       <DashboardStats
         importedDataInView={
diff --git a/assets/js/dashboard/nav-menu/top-bar.tsx b/assets/js/dashboard/nav-menu/top-bar.tsx
index eeefb337fe13..d9b48aa1e682 100644
--- a/assets/js/dashboard/nav-menu/top-bar.tsx
+++ b/assets/js/dashboard/nav-menu/top-bar.tsx
@@ -27,10 +27,10 @@ function TopBarStickyWrapper({ children }: { children: ReactNode }) {
 
   return (
     <>
-      <div id="stats-container-top" ref={ref} />
+      <div id="stats-container-top" className="col-span-full" ref={ref} />
       <div
         className={classNames(
-          'relative top-0 py-2 sm:py-3 z-10',
+          'col-span-full relative top-0 py-2 sm:py-3 -my-3 sm:-my-4 z-10',
           !site.embedded &&
             !inView &&
             'sticky fullwidth-shadow bg-gray-50 dark:bg-gray-950'
@@ -47,7 +47,7 @@ function TopBarInner({ showCurrentVisitors }: TopBarProps) {
 
   return (
     <div className="flex items-center w-full">
-      <div className="flex items-center gap-x-4 shrink-0" ref={leftActionsRef}>
+      <div className="flex items-center gap-x-5 shrink-0" ref={leftActionsRef}>
         <SiteSwitcher />
         {showCurrentVisitors && (
           <CurrentVisitors tooltipBoundaryRef={leftActionsRef} />
diff --git a/assets/js/dashboard/site-switcher.tsx b/assets/js/dashboard/site-switcher.tsx
index 53bfcd3832b8..29eb3a2c7f11 100644
--- a/assets/js/dashboard/site-switcher.tsx
+++ b/assets/js/dashboard/site-switcher.tsx
@@ -170,7 +170,7 @@ export const SiteSwitcher = () => {
           <Popover.Button
             ref={buttonRef}
             className={classNames(
-              'flex items-center rounded h-9 leading-5 font-bold dark:text-gray-100',
+              'flex items-center rounded h-9 text-sm leading-5 font-semibold dark:text-gray-100',
               'hover:bg-gray-100 dark:hover:bg-gray-800'
             )}
             title={currentSite.domain}
@@ -188,7 +188,7 @@ export const SiteSwitcher = () => {
                 ? 'All sites'
                 : currentSite.domain}
             </span>
-            <ChevronDownIcon className="hidden lg:block h-5 w-5 ml-2 dark:text-gray-100" />
+            <ChevronDownIcon className="hidden lg:block size-4 ml-2 dark:text-gray-100" />
           </Popover.Button>
           <Transition
             as="div"
diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 72111eeab9d1..3c894dfe47fd 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -8,7 +8,11 @@ import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
 import { conversionsRoute } from '../../router'
 
-export default function Conversions({ afterFetchData, onGoalFilterClick }) {
+export default function Conversions({
+  afterFetchData,
+  onGoalFilterClick,
+  onListUpdate
+}) {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
@@ -56,6 +60,7 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       }}
       color="bg-red-50 group-hover/row:bg-red-100"
       colMinWidth={90}
+      onListUpdate={onListUpdate}
     />
   )
 }
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index e83c7fb19a8b..dd33a1a19bb9 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -41,7 +41,7 @@ export function specialTitleWhenGoalFilter(query, defaultTitle) {
   return getSpecialGoal(query)?.title || defaultTitle
 }
 
-function SpecialPropBreakdown({ prop, afterFetchData }) {
+function SpecialPropBreakdown({ prop, afterFetchData, onListUpdate }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
@@ -95,11 +95,16 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
       getExternalLinkUrl={getExternalLinkUrlFactory()}
       color="bg-red-50"
       colMinWidth={90}
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
+export default function GoalConversions({
+  afterFetchData,
+  onGoalFilterClick,
+  onListUpdate
+}) {
   const { query } = useQueryContext()
 
   const specialGoal = getSpecialGoal(query)
@@ -108,6 +113,7 @@ export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
       <SpecialPropBreakdown
         prop={specialGoal.prop}
         afterFetchData={afterFetchData}
+        onListUpdate={onListUpdate}
       />
     )
   } else {
@@ -115,6 +121,7 @@ export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
       <Conversions
         onGoalFilterClick={onGoalFilterClick}
         afterFetchData={afterFetchData}
+        onListUpdate={onListUpdate}
       />
     )
   }
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index b0638d18263b..806bdd18a827 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -7,11 +7,22 @@ import GoalConversions, {
 } from './goal-conversions'
 import Properties from './props'
 import { FeatureSetupNotice } from '../../components/notice'
-import { hasConversionGoalFilter } from '../../util/filters'
+import {
+  hasConversionGoalFilter,
+  getGoalFilter,
+  FILTER_OPERATIONS
+} from '../../util/filters'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
 import { useUserContext } from '../../user-context'
 import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
+import { Pill } from '../../components/pill'
+import * as api from '../../api'
+import * as url from '../../util/url'
 
 /*global BUILD_EXTRA*/
 /*global require*/
@@ -48,16 +59,53 @@ export default function Behaviours({ importedDataInView }) {
     'behavioursTabFunnel',
     site.domain
   )
+  const propKeyStorageName = `prop_key__${site.domain}`
+  const propKeyStorageNameForGoal = () => {
+    const [_operation, _filterKey, [goal]] = getGoalFilter(query)
+    return `${goal}__prop_key__${site.domain}`
+  }
   const [enabledModes, setEnabledModes] = useState(getEnabledModes())
   const [mode, setMode] = useState(defaultMode())
   const [loading, setLoading] = useState(true)
 
   const [selectedFunnel, setSelectedFunnel] = useState(defaultSelectedFunnel())
+  const [propertyKeys, setPropertyKeys] = useState([])
+  // Initialize selectedPropKey from storage immediately to show dropdown on page refresh
+  const [selectedPropKey, setSelectedPropKey] = useState(() => {
+    // Inline storage logic to avoid dependency on functions defined later
+    const goalFilter = getGoalFilter(query)
+    let stored = null
+
+    if (goalFilter) {
+      const [operation, _filterKey, clauses] = goalFilter
+      if (operation === FILTER_OPERATIONS.is && clauses.length === 1) {
+        const [goal] = clauses
+        const goalStorageKey = `${goal}__prop_key__${site.domain}`
+        stored = storage.getItem(goalStorageKey)
+      }
+    }
+
+    if (!stored) {
+      stored = storage.getItem(propKeyStorageName)
+    }
+
+    return stored || null
+  })
+
+  // Optimistically add selectedPropKey to propertyKeys on mount so dropdown shows immediately
+  useEffect(() => {
+    if (selectedPropKey && propertyKeys.length === 0) {
+      setPropertyKeys([selectedPropKey])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] =
     useState(false)
 
   const [skipImportedReason, setSkipImportedReason] = useState(null)
+  const { onListUpdate, listData, linkProps, listLoading, reset } =
+    useMoreLinkData()
 
   const onGoalFilterClick = useCallback((e) => {
     const goalName = e.target.innerHTML
@@ -91,6 +139,9 @@ export default function Behaviours({ importedDataInView }) {
   }, [enabledModes])
 
   useEffect(() => setLoading(true), [query, mode])
+  useEffect(() => {
+    reset()
+  }, [query, mode, reset])
 
   function disableMode(mode) {
     setEnabledModes(
@@ -109,6 +160,81 @@ export default function Behaviours({ importedDataInView }) {
     }
   }
 
+  function setPropKeyFactory(selectedPropKeyName) {
+    return () => {
+      storage.setItem(tabKey, PROPS)
+      const storageName = singleGoalFilterApplied()
+        ? propKeyStorageNameForGoal()
+        : propKeyStorageName
+      storage.setItem(storageName, selectedPropKeyName)
+      setMode(PROPS)
+      setSelectedPropKey(selectedPropKeyName)
+    }
+  }
+
+  function singleGoalFilterApplied() {
+    const goalFilter = getGoalFilter(query)
+    if (goalFilter) {
+      const [operation, _filterKey, clauses] = goalFilter
+      return operation === FILTER_OPERATIONS.is && clauses.length === 1
+    } else {
+      return false
+    }
+  }
+
+  function getPropKeyFromStorage() {
+    if (singleGoalFilterApplied()) {
+      const storedForGoal = storage.getItem(propKeyStorageNameForGoal())
+      if (storedForGoal) {
+        return storedForGoal
+      }
+    }
+
+    return storage.getItem(propKeyStorageName)
+  }
+
+  useEffect(() => {
+    // Fetch property keys when PROPS mode is enabled (not just when active)
+    // This ensures the dropdown appears immediately on page refresh
+    if (enabledModes.includes(PROPS) && site.hasProps && site.propsAvailable) {
+      api
+        .get(url.apiPath(site, '/suggestions/prop_key'), query, {
+          q: ''
+        })
+        .then((propKeys) => {
+          const propKeyValues = propKeys.map((entry) => entry.value)
+          setPropertyKeys(propKeyValues)
+          if (propKeyValues.length > 0) {
+            const stored = getPropKeyFromStorage()
+            const storedExists = stored && propKeyValues.includes(stored)
+
+            if (storedExists) {
+              setSelectedPropKey(stored)
+            } else {
+              const firstAvailable = propKeyValues[0]
+              setSelectedPropKey(firstAvailable)
+              const storageName = singleGoalFilterApplied()
+                ? propKeyStorageNameForGoal()
+                : propKeyStorageName
+              storage.setItem(storageName, firstAvailable)
+            }
+          } else {
+            setSelectedPropKey(null)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to fetch property keys:', error)
+          setPropertyKeys([])
+          setSelectedPropKey(null)
+        })
+    } else {
+      // Clear property keys when PROPS is not available
+      setPropertyKeys([])
+      setSelectedPropKey(null)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, enabledModes, site.hasProps, site.propsAvailable])
+
   function defaultSelectedFunnel() {
     const stored = storage.getItem(funnelKey)
     const storedExists = stored && site.funnels.some((f) => f.name === stored)
@@ -141,6 +267,7 @@ export default function Behaviours({ importedDataInView }) {
         <GoalConversions
           onGoalFilterClick={onGoalFilterClick}
           afterFetchData={afterFetchData}
+          onListUpdate={onListUpdate}
         />
       )
     } else if (adminAccess) {
@@ -198,7 +325,13 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderProps() {
     if (site.hasProps && site.propsAvailable) {
-      return <Properties afterFetchData={afterFetchData} />
+      return (
+        <Properties
+          propKey={selectedPropKey}
+          afterFetchData={afterFetchData}
+          onListUpdate={onListUpdate}
+        />
+      )
     } else if (adminAccess) {
       let callToAction
 
@@ -346,15 +479,9 @@ export default function Behaviours({ importedDataInView }) {
   }
 
   return (
-    <div className="items-start justify-between block w-full mt-6 md:flex relative">
-      <div className="w-full p-4 bg-white rounded-md shadow-sm dark:bg-gray-900">
-        <div className="flex justify-between w-full">
-          <div className="flex gap-x-1">
-            <h3 className="font-bold dark:text-gray-100">
-              {sectionTitle() + (isRealtime() ? ' (last 30min)' : '')}
-            </h3>
-            {renderImportedQueryUnsupportedWarning()}
-          </div>
+    <ReportLayout className="col-span-full">
+      <ReportHeader>
+        <div className="flex gap-x-2">
           <TabWrapper>
             {isEnabled(CONVERSIONS) && (
               <TabButton
@@ -364,24 +491,54 @@ export default function Behaviours({ importedDataInView }) {
                 Goals
               </TabButton>
             )}
-            {isEnabled(PROPS) && (
-              <TabButton active={mode === PROPS} onClick={setTabFactory(PROPS)}>
-                Properties
-              </TabButton>
-            )}
+            {isEnabled(PROPS) &&
+              ((propertyKeys.length > 0 || selectedPropKey) &&
+              site.propsAvailable ? (
+                <DropdownTabButton
+                  className="md:relative"
+                  transitionClassName="md:left-auto md:w-88 md:origin-top-right"
+                  active={mode === PROPS}
+                  options={
+                    propertyKeys.length > 0
+                      ? propertyKeys.map((key) => ({
+                          label: key,
+                          onClick: setPropKeyFactory(key),
+                          selected: mode === PROPS && selectedPropKey === key
+                        }))
+                      : selectedPropKey
+                        ? [
+                            {
+                              label: selectedPropKey,
+                              onClick: setPropKeyFactory(selectedPropKey),
+                              selected: true
+                            }
+                          ]
+                        : []
+                  }
+                  searchable={true}
+                >
+                  Properties
+                </DropdownTabButton>
+              ) : (
+                <TabButton
+                  active={mode === PROPS}
+                  onClick={setTabFactory(PROPS)}
+                >
+                  Properties
+                </TabButton>
+              ))}
             {isEnabled(FUNNELS) &&
               Funnel &&
               (site.funnels.length > 0 && site.funnelsAvailable ? (
                 <DropdownTabButton
                   className="md:relative"
-                  transitionClassName="md:left-auto md:w-96 md:origin-top-right"
+                  transitionClassName="md:left-auto md:w-88 md:origin-top-right"
                   active={mode === FUNNELS}
                   options={site.funnels.map(({ name }) => ({
                     label: name,
                     onClick: setFunnelFactory(name),
                     selected: mode === FUNNELS && selectedFunnel === name
                   }))}
-                  collectionTitle="Funnels"
                   searchable={true}
                 >
                   Funnels
@@ -395,9 +552,18 @@ export default function Behaviours({ importedDataInView }) {
                 </TabButton>
               ))}
           </TabWrapper>
+          {isRealtime() && <Pill className="-mt-1">last 30min</Pill>}
+          {renderImportedQueryUnsupportedWarning()}
         </div>
-        {renderContent()}
-      </div>
-    </div>
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
+        />
+      </ReportHeader>
+      {renderContent()}
+    </ReportLayout>
   )
 }
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index d02cfb21c0af..c7aa8a87603f 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -1,77 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React from 'react'
 import ListReport, { MIN_HEIGHT } from '../reports/list'
-import Combobox from '../../components/combobox'
 import * as metrics from '../reports/metrics'
 import * as api from '../../api'
 import * as url from '../../util/url'
-import * as storage from '../../util/storage'
-import {
-  EVENT_PROPS_PREFIX,
-  getGoalFilter,
-  FILTER_OPERATIONS,
-  hasConversionGoalFilter
-} from '../../util/filters'
-import classNames from 'classnames'
+import { EVENT_PROPS_PREFIX, hasConversionGoalFilter } from '../../util/filters'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { customPropsRoute } from '../../router'
 
-export default function Properties({ afterFetchData }) {
+export default function Properties({ propKey, afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
-  const propKeyStorageName = `prop_key__${site.domain}`
-  const propKeyStorageNameForGoal = () => {
-    const [_operation, _filterKey, [goal]] = getGoalFilter(query)
-    return `${goal}__prop_key__${site.domain}`
-  }
-
-  const [propKey, setPropKey] = useState(null)
-  const [propKeyLoading, setPropKeyLoading] = useState(true)
-
-  function singleGoalFilterApplied() {
-    const goalFilter = getGoalFilter(query)
-    if (goalFilter) {
-      const [operation, _filterKey, clauses] = goalFilter
-      return operation === FILTER_OPERATIONS.is && clauses.length === 1
-    } else {
-      return false
-    }
-  }
-
-  useEffect(() => {
-    setPropKeyLoading(true)
-    setPropKey(null)
-
-    fetchPropKeyOptions()('').then((propKeys) => {
-      const propKeyValues = propKeys.map((entry) => entry.value)
-
-      if (propKeyValues.length > 0) {
-        const storedPropKey = getPropKeyFromStorage()
-
-        if (propKeyValues.includes(storedPropKey)) {
-          setPropKey(storedPropKey)
-        } else {
-          setPropKey(propKeys[0].value)
-        }
-      }
-
-      setPropKeyLoading(false)
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
-
-  function getPropKeyFromStorage() {
-    if (singleGoalFilterApplied()) {
-      const storedForGoal = storage.getItem(propKeyStorageNameForGoal())
-      if (storedForGoal) {
-        return storedForGoal
-      }
-    }
-
-    return storage.getItem(propKeyStorageName)
-  }
-
   function fetchProps() {
     return api.get(
       url.apiPath(site, `/custom-prop-values/${encodeURIComponent(propKey)}`),
@@ -79,31 +19,6 @@ export default function Properties({ afterFetchData }) {
     )
   }
 
-  const fetchPropKeyOptions = useCallback(() => {
-    return (input) => {
-      return api.get(url.apiPath(site, '/suggestions/prop_key'), query, {
-        q: input.trim()
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
-
-  function onPropKeySelect() {
-    return (selectedOptions) => {
-      const newPropKey =
-        selectedOptions.length === 0 ? null : selectedOptions[0].value
-
-      if (newPropKey) {
-        const storageName = singleGoalFilterApplied()
-          ? propKeyStorageNameForGoal()
-          : propKeyStorageName
-        storage.setItem(storageName, newPropKey)
-      }
-
-      setPropKey(newPropKey)
-    }
-  }
-
   /*global BUILD_EXTRA*/
   function chooseMetrics() {
     return [
@@ -139,6 +54,7 @@ export default function Properties({ afterFetchData }) {
         }}
         color="bg-red-50 group-hover/row:bg-red-100"
         colMinWidth={90}
+        onListUpdate={onListUpdate}
       />
     )
   }
@@ -148,37 +64,17 @@ export default function Properties({ afterFetchData }) {
     filter: ['is', `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
   })
 
-  const comboboxDisabled = !propKeyLoading && !propKey
-  const comboboxPlaceholder = comboboxDisabled
-    ? 'No custom properties found'
-    : ''
-  const comboboxValues = propKey ? [{ value: propKey, label: propKey }] : []
-  const boxClass = classNames(
-    'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:bg-gray-750 dark:border-gray-750',
-    {
-      'pointer-events-none': comboboxDisabled
-    }
-  )
-
-  const COMBOBOX_HEIGHT = 40
+  if (!propKey) {
+    return (
+      <div className="font-medium text-gray-500 dark:text-gray-400 py-12 text-center">
+        No custom properties found
+      </div>
+    )
+  }
 
   return (
-    <div
-      className="w-full mt-4"
-      style={{ minHeight: `${COMBOBOX_HEIGHT + MIN_HEIGHT}px` }}
-    >
-      <div style={{ minHeight: `${COMBOBOX_HEIGHT}px` }}>
-        <Combobox
-          boxClass={boxClass}
-          forceLoading={propKeyLoading}
-          fetchOptions={fetchPropKeyOptions()}
-          singleOption={true}
-          values={comboboxValues}
-          onSelect={onPropKeySelect()}
-          placeholder={comboboxPlaceholder}
-        />
-      </div>
-      {propKey && renderBreakdown()}
+    <div className="w-full" style={{ minHeight: `${MIN_HEIGHT}px` }}>
+      {renderBreakdown()}
     </div>
   )
 }
diff --git a/assets/js/dashboard/stats/current-visitors.js b/assets/js/dashboard/stats/current-visitors.js
index 4df0bc23c45e..4d95c7694236 100644
--- a/assets/js/dashboard/stats/current-visitors.js
+++ b/assets/js/dashboard/stats/current-visitors.js
@@ -55,7 +55,7 @@ export default function CurrentVisitors({
         <AppNavigationLink
           search={(prev) => ({ ...prev, period: 'realtime' })}
           className={classNames(
-            'h-9 flex items-center text-xs md:text-sm font-bold text-gray-500 dark:text-gray-300',
+            'h-9 flex items-center text-xs md:text-sm font-medium text-gray-500 dark:text-gray-300',
             className
           )}
         >
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 37cb8b8601c0..27cb2ec87402 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -12,6 +12,9 @@ import * as url from '../../util/url'
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
+import { TabButton, TabWrapper } from '../../components/tabs'
 import {
   browsersRoute,
   browserVersionsRoute,
@@ -19,7 +22,8 @@ import {
   operatingSystemVersionsRoute,
   screenSizesRoute
 } from '../../router'
-import { TabButton, TabWrapper } from '../../components/tabs'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
 
 // Icons copied from https://github.com/alrra/browser-logos
 const BROWSER_ICONS = {
@@ -55,7 +59,7 @@ export function browserIconFor(browser) {
   )
 }
 
-function Browsers({ afterFetchData }) {
+function Browsers({ afterFetchData, onListUpdate }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
   function fetchData() {
@@ -94,11 +98,12 @@ function Browsers({ afterFetchData }) {
         path: browsersRoute.path,
         search: (search) => search
       }}
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function BrowserVersions({ afterFetchData }) {
+function BrowserVersions({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -140,6 +145,7 @@ function BrowserVersions({ afterFetchData }) {
         path: browserVersionsRoute.path,
         search: (search) => search
       }}
+      onListUpdate={onListUpdate}
     />
   )
 }
@@ -172,7 +178,7 @@ export function osIconFor(os) {
   )
 }
 
-function OperatingSystems({ afterFetchData }) {
+function OperatingSystems({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -213,11 +219,12 @@ function OperatingSystems({ afterFetchData }) {
         path: operatingSystemsRoute.path,
         search: (search) => search
       }}
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function OperatingSystemVersions({ afterFetchData }) {
+function OperatingSystemVersions({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -260,11 +267,12 @@ function OperatingSystemVersions({ afterFetchData }) {
         path: operatingSystemVersionsRoute.path,
         search: (search) => search
       }}
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function ScreenSizes({ afterFetchData }) {
+function ScreenSizes({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -297,13 +305,14 @@ function ScreenSizes({ afterFetchData }) {
       fetchData={fetchData}
       afterFetchData={afterFetchData}
       getFilterInfo={getFilterInfo}
-      keyLabel="Screen size"
+      keyLabel="Device"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
       detailsLinkProps={{
         path: screenSizesRoute.path,
         search: (search) => search
       }}
+      onListUpdate={onListUpdate}
     />
   )
 }
@@ -392,6 +401,52 @@ export function screenSizeIconFor(screenSize) {
         <line x1="12" y1="17" x2="12" y2="21" />
       </svg>
     )
+  } else if (screenSize === 'Ultra-wide') {
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="-mt-px feather"
+      >
+        <rect x="1" y="4" width="22" height="12" rx="2" ry="2" />
+        <line x1="6" y1="20" x2="18" y2="20" />
+        <line x1="12" y1="16" x2="12" y2="20" />
+      </svg>
+    )
+  } else if (screenSize === '(not set)') {
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="-mt-px feather"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        />
+        <circle cx="12" cy="17.25" r="1.25" />
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          d="M9.244 8.369c.422-1.608 1.733-2.44 3.201-2.364 1.45.075 2.799.872 2.737 2.722-.089 2.63-2.884 2.273-3.197 4.773h.011"
+        />
+      </svg>
+    )
   }
 
   return <span className="mr-1.5">{svg}</span>
@@ -406,10 +461,13 @@ export default function Devices() {
   const [mode, setMode] = useState(storedTab || 'browser')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
+  const { onListUpdate, listData, linkProps, listLoading, reset } =
+    useMoreLinkData()
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
     setMode(mode)
+    reset()
   }
 
   function afterFetchData(apiResponse) {
@@ -418,53 +476,87 @@ export default function Devices() {
   }
 
   useEffect(() => setLoading(true), [query, mode])
+  useEffect(() => {
+    reset()
+  }, [query, mode, reset])
 
   function renderContent() {
     switch (mode) {
       case 'browser':
         if (isFilteringOnFixedValue(query, 'browser')) {
-          return <BrowserVersions afterFetchData={afterFetchData} />
+          return (
+            <BrowserVersions
+              afterFetchData={afterFetchData}
+              onListUpdate={onListUpdate}
+            />
+          )
         }
-        return <Browsers afterFetchData={afterFetchData} />
+        return (
+          <Browsers
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
       case 'os':
         if (isFilteringOnFixedValue(query, 'os')) {
-          return <OperatingSystemVersions afterFetchData={afterFetchData} />
+          return (
+            <OperatingSystemVersions
+              afterFetchData={afterFetchData}
+              onListUpdate={onListUpdate}
+            />
+          )
         }
-        return <OperatingSystems afterFetchData={afterFetchData} />
+        return (
+          <OperatingSystems
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
       case 'size':
       default:
-        return <ScreenSizes afterFetchData={afterFetchData} />
+        return (
+          <ScreenSizes
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
     }
   }
 
   return (
-    <div className="group/report overflow-x-hidden">
-      <div className="flex justify-between w-full">
-        <div className="flex gap-x-1">
-          <h3 className="font-bold dark:text-gray-100">Devices</h3>
+    <ReportLayout className="overflow-x-hidden">
+      <ReportHeader>
+        <div className="flex gap-x-3">
+          <TabWrapper>
+            {[
+              { label: 'Browsers', value: 'browser' },
+              { label: 'Operating systems', value: 'os' },
+              { label: 'Devices', value: 'size' }
+            ].map(({ label, value }) => (
+              <TabButton
+                key={value}
+                active={mode === value}
+                onClick={() => switchTab(value)}
+              >
+                {label}
+              </TabButton>
+            ))}
+          </TabWrapper>
           <ImportedQueryUnsupportedWarning
             loading={loading}
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <TabWrapper>
-          {[
-            { label: 'Browser', value: 'browser' },
-            { label: 'OS', value: 'os' },
-            { label: 'Size', value: 'size' }
-          ].map(({ label, value }) => (
-            <TabButton
-              key={value}
-              active={mode === value}
-              onClick={() => switchTab(value)}
-            >
-              {label}
-            </TabButton>
-          ))}
-        </TabWrapper>
-      </div>
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
+        />
+      </ReportHeader>
       {renderContent()}
-    </div>
+    </ReportLayout>
   )
 }
 
diff --git a/assets/js/dashboard/stats/graph/graph-util.js b/assets/js/dashboard/stats/graph/graph-util.js
index 2846457fc3a8..cf33ed8dfe13 100644
--- a/assets/js/dashboard/stats/graph/graph-util.js
+++ b/assets/js/dashboard/stats/graph/graph-util.js
@@ -31,45 +31,39 @@ const buildComparisonDataset = function (comparisonPlot) {
   return [
     {
       data: plottable(comparisonPlot),
-      borderColor: 'rgba(60,70,110,0.2)',
-      pointBackgroundColor: 'rgba(60,70,110,0.2)',
-      pointHoverBackgroundColor: 'rgba(60, 70, 110)',
+      borderColor: 'rgb(199, 210, 254)',
+      pointBackgroundColor: 'rgb(199, 210, 254)',
+      pointHoverBackgroundColor: 'rgb(199, 210, 254)',
       yAxisID: 'yComparison'
     }
   ]
 }
-
 const buildDashedDataset = function (plot, presentIndex) {
   if (!presentIndex) return []
-
   const dashedPart = plot.slice(presentIndex - 1, presentIndex + 1)
   const dashedPlot = new Array(presentIndex - 1).concat(dashedPart)
-
   return [
     {
       data: plottable(dashedPlot),
       borderDash: [3, 3],
-      borderColor: 'rgba(101,116,205)',
-      pointHoverBackgroundColor: 'rgba(71, 87, 193)',
+      borderColor: 'rgb(99, 102, 241)',
+      pointHoverBackgroundColor: 'rgb(99, 102, 241)',
       yAxisID: 'y'
     }
   ]
 }
-
 const buildMainPlotDataset = function (plot, presentIndex) {
   const data = presentIndex ? plot.slice(0, presentIndex) : plot
-
   return [
     {
       data: plottable(data),
-      borderColor: 'rgba(101,116,205)',
-      pointBackgroundColor: 'rgba(101,116,205)',
-      pointHoverBackgroundColor: 'rgba(71, 87, 193)',
+      borderColor: 'rgb(99, 102, 241)',
+      pointBackgroundColor: 'rgb(99, 102, 241)',
+      pointHoverBackgroundColor: 'rgb(99, 102, 241)',
       yAxisID: 'y'
     }
   ]
 }
-
 export const buildDataSet = (
   plot,
   comparisonPlot,
@@ -79,10 +73,10 @@ export const buildDataSet = (
 ) => {
   var gradient = ctx.createLinearGradient(0, 0, 0, 300)
   var prev_gradient = ctx.createLinearGradient(0, 0, 0, 300)
-  gradient.addColorStop(0, 'rgba(101,116,205, 0.2)')
-  gradient.addColorStop(1, 'rgba(101,116,205, 0)')
-  prev_gradient.addColorStop(0, 'rgba(101,116,205, 0.075)')
-  prev_gradient.addColorStop(1, 'rgba(101,116,205, 0)')
+  gradient.addColorStop(0, 'rgba(79, 70, 229, 0.15)')
+  gradient.addColorStop(1, 'rgba(79, 70, 229, 0)')
+  prev_gradient.addColorStop(0, 'rgba(79, 70, 229, 0.05)')
+  prev_gradient.addColorStop(1, 'rgba(79, 70, 229, 0)')
 
   const defaultOptions = {
     label,
diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js
index db4f06a2a9be..11422cf2d429 100644
--- a/assets/js/dashboard/stats/graph/top-stats.js
+++ b/assets/js/dashboard/stats/graph/top-stats.js
@@ -126,7 +126,7 @@ export default function TopStats({
     const [statDisplayName, statExtraName] = stat.name.split(/(\(.+\))/g)
 
     const statDisplayNameClass = classNames(
-      'text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-fit border-b',
+      'text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-fit border-b',
       {
         'text-indigo-600 dark:text-indigo-500 border-indigo-600 dark:border-indigo-500':
           isSelected,
diff --git a/assets/js/dashboard/stats/graph/visitor-graph.js b/assets/js/dashboard/stats/graph/visitor-graph.js
index 2db7b61a20c7..c9e19a538ce2 100644
--- a/assets/js/dashboard/stats/graph/visitor-graph.js
+++ b/assets/js/dashboard/stats/graph/visitor-graph.js
@@ -166,7 +166,7 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   return (
     <div
       className={
-        'relative w-full mt-2 bg-white rounded-md shadow dark:bg-gray-900'
+        'col-span-full relative w-full bg-white rounded-md shadow dark:bg-gray-900'
       }
     >
       {(topStatsLoading || graphLoading) && renderLoader()}
diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index fe311ddeb5e2..09161fda9fc0 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -15,9 +15,12 @@ import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warni
 import { citiesRoute, countriesRoute, regionsRoute } from '../../router'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
+import MoreLink from '../more-link'
 
-function Countries({ query, site, onClick, afterFetchData }) {
+function Countries({ query, site, onClick, afterFetchData, onListUpdate }) {
   function fetchData() {
     return api.get(apiPath(site, '/countries'), query, { limit: 9 })
   }
@@ -57,11 +60,12 @@ function Countries({ query, site, onClick, afterFetchData }) {
       }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Regions({ query, site, onClick, afterFetchData }) {
+function Regions({ query, site, onClick, afterFetchData, onListUpdate }) {
   function fetchData() {
     return api.get(apiPath(site, '/regions'), query, { limit: 9 })
   }
@@ -98,11 +102,12 @@ function Regions({ query, site, onClick, afterFetchData }) {
       detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Cities({ query, site, afterFetchData }) {
+function Cities({ query, site, afterFetchData, onListUpdate }) {
   function fetchData() {
     return api.get(apiPath(site, '/cities'), query, { limit: 9 })
   }
@@ -138,28 +143,30 @@ function Cities({ query, site, afterFetchData }) {
       detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-const labelFor = {
-  countries: 'Countries',
-  regions: 'Regions',
-  cities: 'Cities'
-}
-
 class Locations extends React.Component {
   constructor(props) {
     super(props)
     this.onCountryFilter = this.onCountryFilter.bind(this)
     this.onRegionFilter = this.onRegionFilter.bind(this)
     this.afterFetchData = this.afterFetchData.bind(this)
+    this.onListUpdate = this.onListUpdate.bind(this)
+    this.onMapDataUpdate = this.onMapDataUpdate.bind(this)
     this.tabKey = `geoTab__${props.site.domain}`
     const storedTab = storage.getItem(this.tabKey)
     this.state = {
       mode: storedTab || 'map',
       loading: true,
-      skipImportedReason: null
+      skipImportedReason: null,
+      listData: null,
+      linkProps: null,
+      listLoading: true,
+      mapData: null,
+      mapLoading: true
     }
   }
 
@@ -190,10 +197,25 @@ class Locations extends React.Component {
   setMode(mode) {
     return () => {
       storage.setItem(this.tabKey, mode)
-      this.setState({ mode })
+      this.setState({
+        mode,
+        listData: null,
+        linkProps: null,
+        listLoading: true,
+        mapData: null,
+        mapLoading: true
+      })
     }
   }
 
+  onListUpdate(list, linkProps, loading) {
+    this.setState({ listData: list, linkProps, listLoading: loading })
+  }
+
+  onMapDataUpdate(data, loading) {
+    this.setState({ mapData: data, mapLoading: loading })
+  }
+
   onCountryFilter(mode) {
     return () => {
       this.countriesRestoreMode = mode
@@ -220,6 +242,7 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
+            onListUpdate={this.onListUpdate}
           />
         )
       case 'regions':
@@ -229,6 +252,7 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
+            onListUpdate={this.onListUpdate}
           />
         )
       case 'countries':
@@ -238,6 +262,7 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
+            onListUpdate={this.onListUpdate}
           />
         )
       case 'map':
@@ -246,43 +271,72 @@ class Locations extends React.Component {
           <CountriesMap
             onCountrySelect={this.onCountryFilter('map')}
             afterFetchData={this.afterFetchData}
+            onDataUpdate={this.onMapDataUpdate}
           />
         )
     }
   }
 
+  getMoreLink() {
+    if (this.state.mode === 'map') {
+      const data = this.state.mapData?.results ?? []
+      return (
+        <MoreLink
+          list={data}
+          linkProps={{
+            path: countriesRoute.path,
+            search: (search) => search
+          }}
+          loading={this.state.mapLoading}
+          className=""
+          onClick={undefined}
+        />
+      )
+    } else {
+      return (
+        <MoreLink
+          list={this.state.listData}
+          linkProps={this.state.linkProps}
+          loading={this.state.listLoading}
+          className=""
+          onClick={undefined}
+        />
+      )
+    }
+  }
+
   render() {
     return (
-      <div className="group/report overflow-x-hidden">
-        <div className="w-full flex justify-between">
-          <div className="flex gap-x-1">
-            <h3 className="font-bold dark:text-gray-100">
-              {labelFor[this.state.mode] || 'Locations'}
-            </h3>
+      <ReportLayout
+        className={this.state.mode === 'map' ? '' : 'overflow-x-hidden'}
+      >
+        <ReportHeader>
+          <div className="flex gap-x-3">
+            <TabWrapper>
+              {[
+                { label: 'Map', value: 'map' },
+                { label: 'Countries', value: 'countries' },
+                { label: 'Regions', value: 'regions' },
+                { label: 'Cities', value: 'cities' }
+              ].map(({ value, label }) => (
+                <TabButton
+                  key={value}
+                  onClick={this.setMode(value)}
+                  active={this.state.mode === value}
+                >
+                  {label}
+                </TabButton>
+              ))}
+            </TabWrapper>
             <ImportedQueryUnsupportedWarning
               loading={this.state.loading}
               skipImportedReason={this.state.skipImportedReason}
             />
           </div>
-          <TabWrapper>
-            {[
-              { label: 'Map', value: 'map' },
-              { label: 'Countries', value: 'countries' },
-              { label: 'Regions', value: 'regions' },
-              { label: 'Cities', value: 'cities' }
-            ].map(({ value, label }) => (
-              <TabButton
-                key={value}
-                onClick={this.setMode(value)}
-                active={this.state.mode === value}
-              >
-                {label}
-              </TabButton>
-            ))}
-          </TabWrapper>
-        </div>
+          {this.getMoreLink()}
+        </ReportHeader>
         {this.renderContent()}
-      </div>
+      </ReportLayout>
     )
   }
 }
diff --git a/assets/js/dashboard/stats/locations/map-tooltip.tsx b/assets/js/dashboard/stats/locations/map-tooltip.tsx
index 7a36a9a8f85a..9e28c5c3f947 100644
--- a/assets/js/dashboard/stats/locations/map-tooltip.tsx
+++ b/assets/js/dashboard/stats/locations/map-tooltip.tsx
@@ -32,7 +32,10 @@ export const MapTooltip = ({ name, value, label, x, y }: MapTooltipProps) => (
       top: y
     }}
   >
-    <div className="font-semibold">{name}</div>
-    <strong className="dark:text-indigo-400">{value}</strong> {label}
+    <div className="text-sm font-semibold">{name}</div>
+    <div className="flex items-center gap-x-1 text-sm">
+      <strong className="dark:text-indigo-400">{value}</strong>
+      {label}
+    </div>
   </div>
 )
diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index 593a5747d8f0..98fad738bde0 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -12,8 +12,6 @@ import { useQueryContext } from '../../query-context'
 import worldJson from 'visionscarto-world-atlas/world/110m.json'
 import { UIMode, useTheme } from '../../theme-context'
 import { apiPath } from '../../util/url'
-import MoreLink from '../more-link'
-import { countriesRoute } from '../../router'
 import { MIN_HEIGHT } from '../reports/list'
 import { MapTooltip } from './map-tooltip'
 import { GeolocationNotice } from './geolocation-notice'
@@ -31,10 +29,15 @@ type WorldJsonCountryData = { properties: { name: string; a3: string } }
 
 const WorldMap = ({
   onCountrySelect,
-  afterFetchData
+  afterFetchData,
+  onDataUpdate
 }: {
   onCountrySelect: () => void
   afterFetchData: (response: unknown) => void
+  onDataUpdate?: (
+    data: { results: CountryData[] } | null,
+    loading: boolean
+  ) => void
 }) => {
   const navigate = useAppNavigate()
   const { mode } = useTheme()
@@ -78,7 +81,10 @@ const WorldMap = ({
     if (data) {
       afterFetchData(data)
     }
-  }, [afterFetchData, data])
+    if (onDataUpdate) {
+      onDataUpdate(data ?? null, isFetching)
+    }
+  }, [afterFetchData, data, isFetching, onDataUpdate])
 
   const { maxValue, dataByCountryCode } = useMemo(() => {
     const dataByCountryCode: Map<string, CountryData> = new Map()
@@ -148,10 +154,12 @@ const WorldMap = ({
     : undefined
 
   return (
-    <div className="flex flex-col relative" style={{ minHeight: MIN_HEIGHT }}>
-      <div className="mt-4" />
+    <div
+      className="flex flex-col justify-center items-center relative"
+      style={{ minHeight: MIN_HEIGHT }}
+    >
       <div
-        className="relative mx-auto w-full"
+        className="relative mt-4 mx-auto w-full"
         style={{ height: height, maxWidth: width }}
       >
         <svg
@@ -179,23 +187,14 @@ const WorldMap = ({
             </div>
           ))}
       </div>
-      <MoreLink
-        list={data?.results ?? []}
-        linkProps={{
-          path: countriesRoute.path,
-          search: (search: Record<string, unknown>) => search
-        }}
-        className="mt-3"
-        onClick={undefined}
-      />
       {site.isDbip && <GeolocationNotice />}
     </div>
   )
 }
 
 const colorScales = {
-  [UIMode.dark]: ['#2e3954', '#6366f1'],
-  [UIMode.light]: ['#f5f3ff', '#a78bfa']
+  [UIMode.dark]: ['#1e1b4b', '#6366f1'], // indigo-950, indigo-500
+  [UIMode.light]: ['#f5f7ff', '#818cf8'] // custom color lighter than indigo-50, indigo-400
 }
 
 const sharedCountryClass = classNames('transition-colors')
@@ -203,19 +202,19 @@ const sharedCountryClass = classNames('transition-colors')
 const countryClass = classNames(
   sharedCountryClass,
   'stroke-1',
-  'fill-[#fafafa]',
-  'stroke-[#dae1e7]',
-  'dark:fill-[#323236]',
-  'dark:stroke-[#18181b]'
+  'fill-gray-150',
+  'stroke-white',
+  'dark:fill-gray-750',
+  'dark:stroke-gray-900'
 )
 
 const highlightedCountryClass = classNames(
   sharedCountryClass,
-  'stroke-2',
-  'fill-[#f4f4f5]',
-  'stroke-[#a78bfa]',
-  'dark:fill-[#3f3f46]',
-  'dark:stroke-[#6366f1]'
+  'stroke-[1.5px]',
+  'fill-gray-150',
+  'stroke-indigo-400',
+  'dark:fill-gray-750',
+  'dark:stroke-indigo-500'
 )
 
 /**
diff --git a/assets/js/dashboard/stats/modals/devices/screen-sizes.js b/assets/js/dashboard/stats/modals/devices/screen-sizes.js
index 5b86d8a56b37..637ea4bcfd3b 100644
--- a/assets/js/dashboard/stats/modals/devices/screen-sizes.js
+++ b/assets/js/dashboard/stats/modals/devices/screen-sizes.js
@@ -13,10 +13,10 @@ function ScreenSizesModal() {
   const site = useSiteContext()
 
   const reportInfo = {
-    title: 'Screen sizes',
+    title: 'Devices',
     dimension: 'screen',
     endpoint: url.apiPath(site, '/screen-sizes'),
-    dimensionLabel: 'Screen size',
+    dimensionLabel: 'Device',
     defaultOrder: ['visitors', SortDirection.desc]
   }
 
diff --git a/assets/js/dashboard/stats/modals/google-keywords.tsx b/assets/js/dashboard/stats/modals/google-keywords.tsx
index 31979bac4776..01bd2c65fcfb 100644
--- a/assets/js/dashboard/stats/modals/google-keywords.tsx
+++ b/assets/js/dashboard/stats/modals/google-keywords.tsx
@@ -91,7 +91,7 @@ function GoogleKeywordsModal() {
   return (
     <Modal>
       <BreakdownTable
-        title="Google Search Terms"
+        title="Google search terms"
         displayError={true}
         onSearch={setSearch}
         {...apiState}
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 13c91782aec3..3d94130d55ae 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
+import { Tooltip } from '../util/tooltip'
 
 function detailsIcon() {
   return (
     <svg
-      className="feather mr-1"
-      style={{ marginTop: '-2px' }}
+      className="feather"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -19,20 +19,34 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({ linkProps, list, className, onClick }) {
-  if (list.length > 0) {
-    return (
-      <div className={`w-full text-center ${className ? className : ''}`}>
-        <AppNavigationLink
-          {...linkProps}
-          className="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150 tracking-wide"
-          onClick={onClick}
-        >
-          {detailsIcon()}
-          DETAILS
-        </AppNavigationLink>
-      </div>
-    )
+export default function MoreLink({
+  linkProps,
+  list,
+  className,
+  onClick,
+  loading
+}) {
+  const portalRef = useRef(null)
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      portalRef.current = document.body
+    }
+  }, [])
+
+  if (!list || list.length === 0 || !linkProps || loading) {
+    return null
   }
-  return null
+
+  return (
+    <Tooltip info="View details" containerRef={portalRef}>
+      <AppNavigationLink
+        {...linkProps}
+        className="flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150"
+        onClick={onClick}
+      >
+        {detailsIcon()}
+      </AppNavigationLink>
+    </Tooltip>
+  )
 }
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index d88aeec43362..1353424ac08b 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -10,9 +10,13 @@ import { hasConversionGoalFilter } from '../../util/filters'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { entryPagesRoute, exitPagesRoute, topPagesRoute } from '../../router'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
 
-function EntryPages({ afterFetchData }) {
+function EntryPages({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -56,11 +60,12 @@ function EntryPages({ afterFetchData }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function ExitPages({ afterFetchData }) {
+function ExitPages({ afterFetchData, onListUpdate }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
   function fetchData() {
@@ -104,11 +109,12 @@ function ExitPages({ afterFetchData }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function TopPages({ afterFetchData }) {
+function TopPages({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -148,16 +154,11 @@ function TopPages({ afterFetchData }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-const labelFor = {
-  pages: 'Top pages',
-  'entry-pages': 'Entry pages',
-  'exit-pages': 'Exit pages'
-}
-
 export default function Pages() {
   const { query } = useQueryContext()
   const site = useSiteContext()
@@ -167,10 +168,13 @@ export default function Pages() {
   const [mode, setMode] = useState(storedTab || 'pages')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
+  const { onListUpdate, listData, linkProps, listLoading, reset } =
+    useMoreLinkData()
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
     setMode(mode)
+    reset()
   }
 
   function afterFetchData(apiResponse) {
@@ -179,50 +183,75 @@ export default function Pages() {
   }
 
   useEffect(() => setLoading(true), [query, mode])
+  useEffect(() => {
+    reset()
+  }, [query, mode, reset])
 
   function renderContent() {
     switch (mode) {
       case 'entry-pages':
-        return <EntryPages afterFetchData={afterFetchData} />
+        return (
+          <EntryPages
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
       case 'exit-pages':
-        return <ExitPages afterFetchData={afterFetchData} />
+        return (
+          <ExitPages
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
       case 'pages':
       default:
-        return <TopPages afterFetchData={afterFetchData} />
+        return (
+          <TopPages
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
     }
   }
 
   return (
-    <div className="group/report overflow-x-hidden">
-      {/* Header Container */}
-      <div className="w-full flex justify-between">
-        <div className="flex gap-x-1">
-          <h3 className="font-bold dark:text-gray-100">
-            {labelFor[mode] || 'Page Visits'}
-          </h3>
+    <ReportLayout className="overflow-x-hidden">
+      <ReportHeader>
+        <div className="flex gap-x-3">
+          <TabWrapper>
+            {[
+              {
+                label: hasConversionGoalFilter(query)
+                  ? 'Conversion pages'
+                  : 'Top pages',
+                value: 'pages'
+              },
+              { label: 'Entry pages', value: 'entry-pages' },
+              { label: 'Exit pages', value: 'exit-pages' }
+            ].map(({ value, label }) => (
+              <TabButton
+                key={value}
+                active={mode === value}
+                onClick={() => switchTab(value)}
+              >
+                {label}
+              </TabButton>
+            ))}
+          </TabWrapper>
           <ImportedQueryUnsupportedWarning
             loading={loading}
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <TabWrapper>
-          {[
-            { label: 'Top pages', value: 'pages' },
-            { label: 'Entry pages', value: 'entry-pages' },
-            { label: 'Exit pages', value: 'exit-pages' }
-          ].map(({ value, label }) => (
-            <TabButton
-              active={mode === value}
-              onClick={() => switchTab(value)}
-              key={value}
-            >
-              {label}
-            </TabButton>
-          ))}
-        </TabWrapper>
-      </div>
-      {/* Main Contents */}
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
+        />
+      </ReportHeader>
       {renderContent()}
-    </div>
+    </ReportLayout>
   )
 }
diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index a939834853f0..d6aac3533a52 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -17,7 +17,7 @@ import { DrilldownLink, FilterInfo } from '../../components/drilldown-link'
 import { BreakdownResultMeta } from '../../query'
 
 const MAX_ITEMS = 9
-export const MIN_HEIGHT = 380
+export const MIN_HEIGHT = 356
 const ROW_HEIGHT = 32
 const ROW_GAP_HEIGHT = 4
 const DATA_CONTAINER_HEIGHT =
@@ -88,7 +88,9 @@ export interface SharedReportProps<
   afterFetchNextPage?: (response: TResponse) => void
 }
 
-type ListReportProps = {
+type ListReportProps<
+  TListItem extends Record<string, unknown> & { name: string }
+> = {
   /** What each entry in the list represents (for UI only). */
   keyLabel: string
   metrics: Metric[]
@@ -99,6 +101,12 @@ type ListReportProps = {
   onClick?: () => void
   /** Color of the comparison bars in light-mode. */
   color?: string
+  /** Callback that receives the list data, linkProps, and loading state whenever it updates. Used to render MoreLink in parent components. */
+  onListUpdate?: (
+    list: TListItem[] | null,
+    linkProps: AppNavigationLinkProps | undefined,
+    loading: boolean
+  ) => void
 }
 
 /**
@@ -121,8 +129,10 @@ export default function ListReport<
   getFilterInfo,
   renderIcon,
   getExternalLinkUrl,
-  fetchData
-}: Omit<SharedReportProps<TListItem>, 'afterFetchNextPage'> & ListReportProps) {
+  fetchData,
+  onListUpdate
+}: Omit<SharedReportProps<TListItem>, 'afterFetchNextPage'> &
+  ListReportProps<TListItem>) {
   const { query } = useQueryContext()
   const [state, setState] = useState<{
     loading: boolean
@@ -138,6 +148,9 @@ export default function ListReport<
   const getData = useCallback(() => {
     if (!isRealtime) {
       setState({ loading: true, list: null, meta: null })
+      if (onListUpdate) {
+        onListUpdate(null, detailsLinkProps, true)
+      }
     }
     fetchData().then((response) => {
       if (afterFetchData) {
@@ -145,9 +158,12 @@ export default function ListReport<
       }
 
       setState({ loading: false, list: response.results, meta: response.meta })
+      if (onListUpdate) {
+        onListUpdate(response.results, detailsLinkProps, false)
+      }
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyLabel, query])
+  }, [keyLabel, query, detailsLinkProps, onListUpdate])
 
   const onVisible = () => {
     setVisible(true)
@@ -159,6 +175,9 @@ export default function ListReport<
       // loading state, even in realtime mode, because the metrics list will change. We can
       // only read the new metrics once the new list is loaded.
       setState({ loading: true, list: null, meta: null })
+      if (onListUpdate) {
+        onListUpdate(null, detailsLinkProps, true)
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalFilterApplied])
@@ -239,15 +258,6 @@ export default function ListReport<
               {state.list.slice(0, MAX_ITEMS).map(renderRow)}
             </FlipMove>
           </div>
-
-          {!!detailsLinkProps && !state.loading && (
-            <MoreLink
-              onClick={undefined}
-              className={'mt-3'}
-              linkProps={detailsLinkProps}
-              list={state.list}
-            />
-          )}
         </div>
       )
     }
diff --git a/assets/js/dashboard/stats/reports/report-header.js b/assets/js/dashboard/stats/reports/report-header.js
new file mode 100644
index 000000000000..c5b8c381abdb
--- /dev/null
+++ b/assets/js/dashboard/stats/reports/report-header.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function ReportHeader({ children }) {
+  return (
+    <div className="w-full flex justify-between border-b border-gray-200 dark:border-gray-750">
+      {children}
+    </div>
+  )
+}
diff --git a/assets/js/dashboard/stats/reports/report-layout.js b/assets/js/dashboard/stats/reports/report-layout.js
new file mode 100644
index 000000000000..c504c35fb122
--- /dev/null
+++ b/assets/js/dashboard/stats/reports/report-layout.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames'
+
+export function ReportLayout({ children, className = undefined }) {
+  return (
+    <div
+      className={classNames(
+        'group/report relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index bab9205f1e34..961d06847c73 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -1,14 +1,17 @@
 import React, { useEffect, useCallback } from 'react'
 import FadeIn from '../../fade-in'
 import Bar from '../bar'
-import MoreLink from '../more-link'
 import { numberShortFormatter } from '../../util/number-formatter'
 import RocketIcon from '../modals/rocket-icon'
 import * as api from '../../api'
 import LazyLoader from '../../components/lazy-loader'
-import { referrersGoogleRoute } from '../../router'
 import { useQueryContext } from '../../query-context'
 import { PlausibleSite, useSiteContext } from '../../site-context'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
+import { TabButton, TabWrapper } from '../../components/tabs'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
 
 interface SearchTerm {
   name: string
@@ -74,6 +77,7 @@ function ConfigureSearchTermsCTA({
 export function SearchTerms() {
   const site = useSiteContext()
   const { query } = useQueryContext()
+  const { listData, linkProps, listLoading } = useMoreLinkData()
 
   const [loading, setLoading] = React.useState(true)
   const [errorPayload, setErrorPayload] = React.useState<null | ErrorPayload>(
@@ -143,15 +147,6 @@ export function SearchTerms() {
                 </span>
               </div>
             ))}
-          <MoreLink
-            list={searchTerms}
-            linkProps={{
-              path: referrersGoogleRoute.path,
-              search: (search: Record<string, unknown>) => search
-            }}
-            className="w-full mt-3"
-            onClick={undefined}
-          />
         </React.Fragment>
       )
     }
@@ -186,8 +181,23 @@ export function SearchTerms() {
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <h3 className="font-bold dark:text-gray-100">Search Terms</h3>
+    <ReportLayout>
+      <ReportHeader>
+        <div className="flex gap-x-3">
+          <TabWrapper>
+            <TabButton active={true} onClick={() => {}}>
+              Search terms
+            </TabButton>
+          </TabWrapper>
+        </div>
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
+        />
+      </ReportHeader>
       <div className="relative grow">
         {loading && (
           <div className="absolute inset-0 flex justify-center items-center">
@@ -204,6 +214,6 @@ export function SearchTerms() {
           </LazyLoader>
         </FadeIn>
       </div>
-    </div>
+    </ReportLayout>
   )
 }
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 007143d6ed9c..21ffee85a482 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -23,7 +23,11 @@ import {
   utmSourcesRoute,
   utmTermsRoute
 } from '../../router'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
 import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
 
 const UTM_TAGS = {
   utm_medium: {
@@ -49,7 +53,7 @@ const UTM_TAGS = {
   utm_term: { title: 'UTM terms', label: 'Term', endpoint: '/utm_terms' }
 }
 
-function AllSources({ afterFetchData }) {
+function AllSources({ afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -86,11 +90,12 @@ function AllSources({ afterFetchData }) {
       detailsLinkProps={{ path: sourcesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-blue-50 group-hover/row:bg-blue-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Channels({ onClick, afterFetchData }) {
+function Channels({ onClick, afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -127,11 +132,12 @@ function Channels({ onClick, afterFetchData }) {
         search: (search) => search
       }}
       color="bg-blue-50 group-hover/row:bg-blue-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-function UTMSources({ tab, afterFetchData }) {
+function UTMSources({ tab, afterFetchData, onListUpdate }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   const utmTag = UTM_TAGS[tab]
@@ -173,19 +179,11 @@ function UTMSources({ tab, afterFetchData }) {
       metrics={chooseMetrics()}
       detailsLinkProps={{ path: route?.path, search: (search) => search }}
       color="bg-blue-50 group-hover/row:bg-blue-100"
+      onListUpdate={onListUpdate}
     />
   )
 }
 
-const labelFor = {
-  channels: 'Top channels',
-  all: 'Top sources'
-}
-
-for (const [key, utm_tag] of Object.entries(UTM_TAGS)) {
-  labelFor[key] = utm_tag.title
-}
-
 export default function SourceList() {
   const site = useSiteContext()
   const { query } = useQueryContext()
@@ -194,9 +192,14 @@ export default function SourceList() {
   const [currentTab, setCurrentTab] = useState(storedTab || 'all')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
+  const { onListUpdate, listData, linkProps, listLoading, reset } =
+    useMoreLinkData()
   const previousQuery = usePrevious(query)
 
   useEffect(() => setLoading(true), [query, currentTab])
+  useEffect(() => {
+    reset()
+  }, [query, currentTab, reset])
 
   useEffect(() => {
     const isRemovingFilter = (filterName) => {
@@ -218,6 +221,7 @@ export default function SourceList() {
     return () => {
       storage.setItem(tabKey, tab)
       setCurrentTab(tab)
+      reset()
     }
   }
 
@@ -225,70 +229,87 @@ export default function SourceList() {
     setTab('all')()
   }
 
+  function afterFetchData(apiResponse) {
+    setLoading(false)
+    setSkipImportedReason(apiResponse.skip_imported_reason)
+  }
+
   function renderContent() {
     if (Object.keys(UTM_TAGS).includes(currentTab)) {
-      return <UTMSources tab={currentTab} afterFetchData={afterFetchData} />
+      return (
+        <UTMSources
+          tab={currentTab}
+          afterFetchData={afterFetchData}
+          onListUpdate={onListUpdate}
+        />
+      )
     }
 
     switch (currentTab) {
       case 'channels':
         return (
-          <Channels onClick={onChannelClick} afterFetchData={afterFetchData} />
+          <Channels
+            onClick={onChannelClick}
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
         )
       case 'all':
       default:
-        return <AllSources afterFetchData={afterFetchData} />
+        return (
+          <AllSources
+            afterFetchData={afterFetchData}
+            onListUpdate={onListUpdate}
+          />
+        )
     }
   }
 
-  function afterFetchData(apiResponse) {
-    setLoading(false)
-    setSkipImportedReason(apiResponse.skip_imported_reason)
-  }
-
   return (
-    <div className="group/report overflow-x-hidden">
-      {/* Header Container */}
-      <div className="w-full flex justify-between">
-        <div className="flex gap-x-1">
-          <h3 className="font-bold dark:text-gray-100">
-            {labelFor[currentTab]}
-          </h3>
+    <ReportLayout className="overflow-x-hidden">
+      <ReportHeader>
+        <div className="flex gap-x-3">
+          <TabWrapper>
+            {[
+              { value: 'channels', label: 'Channels' },
+              { value: 'all', label: 'Sources' }
+            ].map(({ value, label }) => (
+              <TabButton
+                key={value}
+                onClick={setTab(value)}
+                active={currentTab === value}
+              >
+                {label}
+              </TabButton>
+            ))}
+            <DropdownTabButton
+              className="md:relative"
+              transitionClassName="md:left-auto md:w-56 md:origin-top-right"
+              active={Object.keys(UTM_TAGS).includes(currentTab)}
+              options={Object.entries(UTM_TAGS).map(([value, { title }]) => ({
+                value,
+                label: title,
+                onClick: setTab(value),
+                selected: currentTab === value
+              }))}
+            >
+              {UTM_TAGS[currentTab] ? UTM_TAGS[currentTab].title : 'Campaigns'}
+            </DropdownTabButton>
+          </TabWrapper>
           <ImportedQueryUnsupportedWarning
             loading={loading}
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <TabWrapper>
-          {[
-            { value: 'channels', label: 'Channels' },
-            { value: 'all', label: 'Sources' }
-          ].map(({ value, label }) => (
-            <TabButton
-              key={value}
-              onClick={setTab(value)}
-              active={currentTab === value}
-            >
-              {label}
-            </TabButton>
-          ))}
-          <DropdownTabButton
-            className="md:relative"
-            transitionClassName="md:left-auto md:w-56 md:origin-top-right"
-            active={Object.keys(UTM_TAGS).includes(currentTab)}
-            options={Object.entries(UTM_TAGS).map(([value, { title }]) => ({
-              value,
-              label: title,
-              onClick: setTab(value),
-              selected: currentTab === value
-            }))}
-          >
-            {UTM_TAGS[currentTab] ? UTM_TAGS[currentTab].title : 'Campaigns'}
-          </DropdownTabButton>
-        </TabWrapper>
-      </div>
-      {/* Main Contents */}
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
+        />
+      </ReportHeader>
       {renderContent()}
-    </div>
+    </ReportLayout>
   )
 }

From 848fafdb3222f5244a9747531a5dc43176b92061 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 12:30:29 +0100
Subject: [PATCH 02/23] Update map colors

---
 assets/js/dashboard/stats/locations/map.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index 98fad738bde0..129beda0219b 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -193,8 +193,8 @@ const WorldMap = ({
 }
 
 const colorScales = {
-  [UIMode.dark]: ['#1e1b4b', '#6366f1'], // indigo-950, indigo-500
-  [UIMode.light]: ['#f5f7ff', '#818cf8'] // custom color lighter than indigo-50, indigo-400
+  [UIMode.dark]: ['#312e81', '#6366f1'], // indigo-900, indigo-500
+  [UIMode.light]: ['#e0e7ff', '#818cf8'] // indigo-100, indigo-400
 }
 
 const sharedCountryClass = classNames('transition-colors')

From 01b225818299001401ad46e03983fd0c8032d3f4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 12:30:57 +0100
Subject: [PATCH 03/23] Remove unused `sectionTitle` function and ensure Goals
 tab label updates when special goal filter is applied

---
 assets/js/dashboard/stats/behaviours/index.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 806bdd18a827..5b737318f187 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -440,13 +440,6 @@ export default function Behaviours({ importedDataInView }) {
     return query.period === 'realtime'
   }
 
-  function sectionTitle() {
-    if (mode === CONVERSIONS) {
-      return specialTitleWhenGoalFilter(query, sectionTitles[mode])
-    } else {
-      return sectionTitles[mode]
-    }
-  }
 
   function renderImportedQueryUnsupportedWarning() {
     if (mode === CONVERSIONS) {
@@ -488,7 +481,7 @@ export default function Behaviours({ importedDataInView }) {
                 active={mode === CONVERSIONS}
                 onClick={setTabFactory(CONVERSIONS)}
               >
-                Goals
+                {specialTitleWhenGoalFilter(query, 'Goals')}
               </TabButton>
             )}
             {isEnabled(PROPS) &&

From 949dd50302084031d9409350cca4a8869389952d Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 12:47:37 +0100
Subject: [PATCH 04/23] Fix formatting issues

---
 assets/js/dashboard/stats/behaviours/index.js |  1 -
 assets/js/dashboard/stats/devices/index.js    | 24 ++++++-------------
 assets/js/dashboard/stats/locations/map.tsx   |  2 +-
 assets/js/dashboard/stats/more-link.js        |  8 +------
 assets/js/dashboard/stats/reports/list.tsx    |  1 -
 5 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 5b737318f187..5887b0f52a13 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -440,7 +440,6 @@ export default function Behaviours({ importedDataInView }) {
     return query.period === 'realtime'
   }
 
-
   function renderImportedQueryUnsupportedWarning() {
     if (mode === CONVERSIONS) {
       return (
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 27cb2ec87402..9d7bd7258e25 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -425,26 +425,16 @@ export function screenSizeIconFor(screenSize) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="-mt-px feather"
       >
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        />
+        <circle cx="12" cy="12" r="10" />
         <circle cx="12" cy="17.25" r="1.25" />
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          d="M9.244 8.369c.422-1.608 1.733-2.44 3.201-2.364 1.45.075 2.799.872 2.737 2.722-.089 2.63-2.884 2.273-3.197 4.773h.011"
-        />
+        <path d="M9.244 8.369c.422-1.608 1.733-2.44 3.201-2.364 1.45.075 2.799.872 2.737 2.722-.089 2.63-2.884 2.273-3.197 4.773h.011" />
       </svg>
     )
   }
diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index 129beda0219b..6f24281be931 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -193,7 +193,7 @@ const WorldMap = ({
 }
 
 const colorScales = {
-  [UIMode.dark]: ['#312e81', '#6366f1'], // indigo-900, indigo-500
+  [UIMode.dark]: ['#2a276d', '#6366f1'], // custom color between indigo-900 and indigo-950, indigo-500
   [UIMode.light]: ['#e0e7ff', '#818cf8'] // indigo-100, indigo-400
 }
 
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 3d94130d55ae..94cafaee30f5 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -19,13 +19,7 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({
-  linkProps,
-  list,
-  className,
-  onClick,
-  loading
-}) {
+export default function MoreLink({ linkProps, list, onClick, loading }) {
   const portalRef = useRef(null)
 
   useEffect(() => {
diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index d6aac3533a52..8a5fe9227aee 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -3,7 +3,6 @@ import { AppNavigationLinkProps } from '../../navigation/use-app-navigate'
 import FlipMove from 'react-flip-move'
 
 import FadeIn from '../../fade-in'
-import MoreLink from '../more-link'
 import Bar from '../bar'
 import LazyLoader from '../../components/lazy-loader'
 import { trimURL } from '../../util/url'

From b1a9cf818df820c2ac0f0b4ddfbe20ca6b9fcae1 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 12:58:49 +0100
Subject: [PATCH 05/23] Fix another formatting issue

---
 assets/js/dashboard/stats/sources/search-terms.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index 961d06847c73..bd1ebea3cb1c 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -194,7 +194,6 @@ export function SearchTerms() {
           list={listData}
           linkProps={linkProps}
           loading={listLoading}
-          className=""
           onClick={undefined}
         />
       </ReportHeader>

From 1fab2d7ebbf76214b8d0092ecafa7c81121c85c5 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 15:48:34 +0100
Subject: [PATCH 06/23] Refactor referrer list to use new ReportLayout
 structure

---
 .../dashboard/stats/sources/referrer-list.js  | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index 8f7269d88673..09ada8e8287e 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -9,6 +9,11 @@ import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { referrersDrilldownRoute } from '../../router'
 import { SourceFavicon } from './source-favicon'
+import { ReportLayout } from '../reports/report-layout'
+import { ReportHeader } from '../reports/report-header'
+import { TabButton, TabWrapper } from '../../components/tabs'
+import { useMoreLinkData } from '../../hooks/use-more-link-data'
+import MoreLink from '../more-link'
 
 const NO_REFERRER = 'Direct / None'
 
@@ -17,6 +22,7 @@ export default function Referrers({ source }) {
   const site = useSiteContext()
   const [skipImportedReason, setSkipImportedReason] = useState(null)
   const [loading, setLoading] = useState(true)
+  const { onListUpdate, listData, linkProps, listLoading } = useMoreLinkData()
 
   useEffect(() => setLoading(true), [query])
 
@@ -68,14 +74,27 @@ export default function Referrers({ source }) {
   }
 
   return (
-    <div className="flex flex-col grow">
-      <div className="flex gap-x-1">
-        <h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
-        <ImportedQueryUnsupportedWarning
-          loading={loading}
-          skipImportedReason={skipImportedReason}
+    <ReportLayout className="overflow-x-hidden">
+      <ReportHeader>
+        <div className="flex gap-x-3">
+          <TabWrapper>
+            <TabButton active={true} onClick={() => {}}>
+              Top referrers
+            </TabButton>
+          </TabWrapper>
+          <ImportedQueryUnsupportedWarning
+            loading={loading}
+            skipImportedReason={skipImportedReason}
+          />
+        </div>
+        <MoreLink
+          list={listData}
+          linkProps={linkProps}
+          loading={listLoading}
+          className=""
+          onClick={undefined}
         />
-      </div>
+      </ReportHeader>
       <ListReport
         fetchData={fetchReferrers}
         afterFetchData={afterFetchReferrers}
@@ -90,7 +109,8 @@ export default function Referrers({ source }) {
         getExternalLinkUrl={getExternalLinkUrl}
         renderIcon={renderIcon}
         color="bg-blue-50"
+        onListUpdate={onListUpdate}
       />
-    </div>
+    </ReportLayout>
   )
 }

From 0a86781880d187f740db1952b9e0c4cb86ad9755 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 16:04:59 +0100
Subject: [PATCH 07/23] Show 'Conversions' instead of 'Current visitors' when
 both conversion goal filter and realtime are active

---
 assets/js/dashboard/stats/locations/map.tsx   | 20 ++++++++++++++-----
 .../stats/modals/devices/choose-metrics.js    |  2 +-
 .../js/dashboard/stats/modals/entry-pages.js  |  2 +-
 .../js/dashboard/stats/modals/exit-pages.js   |  7 +++++--
 .../dashboard/stats/modals/locations-modal.js |  7 +++++--
 assets/js/dashboard/stats/modals/pages.js     |  2 +-
 .../stats/modals/referrer-drilldown.js        |  2 +-
 assets/js/dashboard/stats/modals/sources.js   |  2 +-
 assets/js/dashboard/stats/reports/metrics.js  |  6 +++---
 9 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index 6f24281be931..d514f024c5d1 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -2,7 +2,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as d3 from 'd3'
 import classNames from 'classnames'
 import * as api from '../../api'
-import { replaceFilterByPrefix, cleanLabels } from '../../util/filters'
+import {
+  replaceFilterByPrefix,
+  cleanLabels,
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
 import { useAppNavigate } from '../../navigation/use-app-navigate'
 import { numberShortFormatter } from '../../util/number-formatter'
 import * as topojson from 'topojson-client'
@@ -50,10 +55,15 @@ const WorldMap = ({
     hoveredCountryAlpha3Code: string | null
   }>({ x: 0, y: 0, hoveredCountryAlpha3Code: null })
 
-  const labels =
-    query.period === 'realtime'
-      ? { singular: 'Current visitor', plural: 'Current visitors' }
-      : { singular: 'Visitor', plural: 'Visitors' }
+  const labels = (() => {
+    if (hasConversionGoalFilter(query)) {
+      return { singular: 'Conversion', plural: 'Conversions' }
+    }
+    if (isRealTimeDashboard(query)) {
+      return { singular: 'Current visitor', plural: 'Current visitors' }
+    }
+    return { singular: 'Visitor', plural: 'Visitors' }
+  })()
 
   const { data, refetch, isFetching, isError } = useQuery({
     queryKey: ['countries', 'map', query],
diff --git a/assets/js/dashboard/stats/modals/devices/choose-metrics.js b/assets/js/dashboard/stats/modals/devices/choose-metrics.js
index bf647fcdb7cf..34959eddcb1d 100644
--- a/assets/js/dashboard/stats/modals/devices/choose-metrics.js
+++ b/assets/js/dashboard/stats/modals/devices/choose-metrics.js
@@ -22,7 +22,7 @@ export default function chooseMetrics(query, site) {
     ].filter((metric) => !!metric)
   }
 
-  if (isRealTimeDashboard(query)) {
+  if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
     return [
       metrics.createVisitors({
         renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js
index 61f09ea37fa5..51840cd36e2c 100644
--- a/assets/js/dashboard/stats/modals/entry-pages.js
+++ b/assets/js/dashboard/stats/modals/entry-pages.js
@@ -63,7 +63,7 @@ function EntryPagesModal() {
       ].filter((metric) => !!metric)
     }
 
-    if (isRealTimeDashboard(query)) {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/exit-pages.js b/assets/js/dashboard/stats/modals/exit-pages.js
index 433f8f9b293d..0cb072a7642c 100644
--- a/assets/js/dashboard/stats/modals/exit-pages.js
+++ b/assets/js/dashboard/stats/modals/exit-pages.js
@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react'
 import Modal from './modal'
-import { hasConversionGoalFilter } from '../../util/filters'
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
 import { addFilter, revenueAvailable } from '../../query'
 import BreakdownModal from './breakdown-modal'
 import * as metrics from '../reports/metrics'
@@ -60,7 +63,7 @@ function ExitPagesModal() {
       ].filter((metric) => !!metric)
     }
 
-    if (query.period === 'realtime') {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/locations-modal.js b/assets/js/dashboard/stats/modals/locations-modal.js
index 9356f6c3a2e9..c4f313ac58a6 100644
--- a/assets/js/dashboard/stats/modals/locations-modal.js
+++ b/assets/js/dashboard/stats/modals/locations-modal.js
@@ -1,7 +1,10 @@
 import React, { useCallback } from 'react'
 
 import Modal from './modal'
-import { hasConversionGoalFilter } from '../../util/filters'
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
 import BreakdownModal from './breakdown-modal'
 import * as metrics from '../reports/metrics'
 import * as url from '../../util/url'
@@ -84,7 +87,7 @@ function LocationsModal({ currentView }) {
       ].filter((metric) => !!metric)
     }
 
-    if (query.period === 'realtime') {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/pages.js b/assets/js/dashboard/stats/modals/pages.js
index b4c05d17676e..3445480abf28 100644
--- a/assets/js/dashboard/stats/modals/pages.js
+++ b/assets/js/dashboard/stats/modals/pages.js
@@ -63,7 +63,7 @@ function PagesModal() {
       ].filter((metric) => !!metric)
     }
 
-    if (isRealTimeDashboard(query)) {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/referrer-drilldown.js b/assets/js/dashboard/stats/modals/referrer-drilldown.js
index 324aafd2e87e..21b1b9bf38b8 100644
--- a/assets/js/dashboard/stats/modals/referrer-drilldown.js
+++ b/assets/js/dashboard/stats/modals/referrer-drilldown.js
@@ -70,7 +70,7 @@ function ReferrerDrilldownModal() {
       ].filter((metric) => !!metric)
     }
 
-    if (isRealTimeDashboard(query)) {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js
index 43c83b2cfcdc..383c4937a356 100644
--- a/assets/js/dashboard/stats/modals/sources.js
+++ b/assets/js/dashboard/stats/modals/sources.js
@@ -136,7 +136,7 @@ function SourcesModal({ currentView }) {
       ].filter((metric) => !!metric)
     }
 
-    if (isRealTimeDashboard(query)) {
+    if (isRealTimeDashboard(query) && !hasConversionGoalFilter(query)) {
       return [
         metrics.createVisitors({
           renderLabel: (_query) => 'Current visitors',
diff --git a/assets/js/dashboard/stats/reports/metrics.js b/assets/js/dashboard/stats/reports/metrics.js
index d3089714c59d..107b373f2ef6 100644
--- a/assets/js/dashboard/stats/reports/metrics.js
+++ b/assets/js/dashboard/stats/reports/metrics.js
@@ -77,12 +77,12 @@ export const createVisitors = (props) => {
       const realtimeLabel = props.realtimeLabel || 'Current visitors'
       const goalFilterLabel = props.goalFilterLabel || 'Conversions'
 
-      if (query.period === 'realtime') {
-        return realtimeLabel
-      }
       if (query && hasConversionGoalFilter(query)) {
         return goalFilterLabel
       }
+      if (query.period === 'realtime') {
+        return realtimeLabel
+      }
       return defaultLabel
     }
   }

From 65e1d96650b08f6bd47040545d6c99dd8bcd1cce Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 16:26:39 +0100
Subject: [PATCH 08/23] Improve imported query unsupported warning icon and
 tooltip

---
 .../imported-query-unsupported-warning.js      | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/js/dashboard/stats/imported-query-unsupported-warning.js b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
index a6aab6128c80..3f442fb45939 100644
--- a/assets/js/dashboard/stats/imported-query-unsupported-warning.js
+++ b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import FadeIn from '../fade-in'
 import { useQueryContext } from '../query-context'
+import { Tooltip } from '../util/tooltip'
 
 export default function ImportedQueryUnsupportedWarning({
   loading,
@@ -10,6 +11,7 @@ export default function ImportedQueryUnsupportedWarning({
   message
 }) {
   const { query } = useQueryContext()
+  const portalRef = useRef(null)
   const tooltipMessage =
     message || 'Imported data is excluded due to applied filters'
   const show =
@@ -18,12 +20,18 @@ export default function ImportedQueryUnsupportedWarning({
     skipImportedReason === 'unsupported_query' &&
     query.period !== 'realtime'
 
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      portalRef.current = document.body
+    }
+  }, [])
+
   if (show || altCondition) {
     return (
-      <FadeIn show={!loading} className="h-6">
-        <span tooltip={tooltipMessage}>
-          <ExclamationCircleIcon className="w-6 h-6 dark:text-gray-100" />
-        </span>
+      <FadeIn show={!loading} className="h-4.5">
+        <Tooltip info={tooltipMessage} containerRef={portalRef}>
+          <ExclamationCircleIcon className="mb-1 size-4.5 text-gray-500 dark:text-gray-400" />
+        </Tooltip>
       </FadeIn>
     )
   } else {

From 7f31c9e79b9fc07f118b79b943f9baf7e38c4bb7 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 16:33:30 +0100
Subject: [PATCH 09/23] Make active tab bold to improve contrast

---
 assets/js/dashboard/components/tabs.tsx      | 6 +++---
 assets/js/dashboard/stats/graph/top-stats.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx
index 5d5670c2bea5..3bc0fe4f299a 100644
--- a/assets/js/dashboard/components/tabs.tsx
+++ b/assets/js/dashboard/components/tabs.tsx
@@ -33,11 +33,11 @@ const TabButtonText = ({
 }) => (
   <span
     className={classNames(
-      '-mb-px pb-4 truncate text-left text-xs font-semibold uppercase transition-colors duration-150',
+      '-mb-px pb-4 truncate text-left text-xs uppercase transition-colors duration-150',
       {
-        'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 cursor-pointer':
+        'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-semibold cursor-pointer':
           !active,
-        'border-b-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100':
+        'border-b-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]':
           active
       }
     )}
diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js
index 11422cf2d429..e370dca7c50e 100644
--- a/assets/js/dashboard/stats/graph/top-stats.js
+++ b/assets/js/dashboard/stats/graph/top-stats.js
@@ -126,11 +126,11 @@ export default function TopStats({
     const [statDisplayName, statExtraName] = stat.name.split(/(\(.+\))/g)
 
     const statDisplayNameClass = classNames(
-      'text-xs font-semibold text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-fit border-b',
+      'text-xs text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-fit border-b',
       {
-        'text-indigo-600 dark:text-indigo-500 border-indigo-600 dark:border-indigo-500':
+        'text-indigo-600 dark:text-indigo-500 font-bold tracking-[-.01em] border-indigo-600 dark:border-indigo-500':
           isSelected,
-        'group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent':
+        'font-semibold group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent':
           !isSelected
       }
     )

From b804a76e0b26ae679e4007105ef98a97dc0335a4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 17:28:36 +0100
Subject: [PATCH 10/23] Various small fixes

---
 assets/js/dashboard/components/tabs.tsx       | 47 +++++++++++--------
 .../segments/searchable-segments-section.tsx  |  2 +-
 assets/js/dashboard/stats/more-link.js        | 18 +++++--
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx
index 3bc0fe4f299a..cc87690beddd 100644
--- a/assets/js/dashboard/components/tabs.tsx
+++ b/assets/js/dashboard/components/tabs.tsx
@@ -33,12 +33,11 @@ const TabButtonText = ({
 }) => (
   <span
     className={classNames(
-      '-mb-px pb-4 truncate text-left text-xs uppercase transition-colors duration-150',
+      'truncate text-left text-xs uppercase transition-colors duration-150',
       {
         'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-semibold cursor-pointer':
           !active,
-        'border-b-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]':
-          active
+        'text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]': active
       }
     )}
   >
@@ -57,12 +56,18 @@ export const TabButton = ({
   onClick: () => void
   active: boolean
 }) => (
-  <button
-    className={classNames('flex rounded-sm', className)}
-    onClick={onClick}
+  <div
+    className={classNames('-mb-px pb-4', {
+      'border-b-2 border-gray-900 dark:border-gray-100': active
+    })}
   >
-    <TabButtonText active={active}>{children}</TabButtonText>
-  </button>
+    <button
+      className={classNames('flex rounded-sm', className)}
+      onClick={onClick}
+    >
+      <TabButtonText active={active}>{children}</TabButtonText>
+    </button>
+  </div>
 )
 
 export const DropdownTabButton = ({
@@ -84,16 +89,22 @@ export const DropdownTabButton = ({
       {({ close: closeDropdown }) => (
         <>
           <BlurMenuButtonOnEscape targetRef={dropdownButtonRef} />
-          <Popover.Button
-            className="inline-flex justify-between rounded-xs"
-            ref={dropdownButtonRef}
+          <div
+            className={classNames('-mb-px pb-4', {
+              'border-b-2 border-gray-900 dark:border-gray-100': active
+            })}
           >
-            <TabButtonText active={active}>{children}</TabButtonText>
+            <Popover.Button
+              className="inline-flex justify-between rounded-xs"
+              ref={dropdownButtonRef}
+            >
+              <TabButtonText active={active}>{children}</TabButtonText>
 
-            <div className="ml-1 pb-4" aria-hidden="true">
-              <ChevronDownIcon className="size-4" />
-            </div>
-          </Popover.Button>
+              <div className="ml-1" aria-hidden="true">
+                <ChevronDownIcon className="size-4" />
+              </div>
+            </Popover.Button>
+          </div>
 
           <Transition
             as="div"
@@ -167,9 +178,7 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
         </div>
       )}
       <div
-        className={
-          'max-h-[224px] overflow-y-scroll flex flex-col gap-y-0.5 p-1'
-        }
+        className={'max-h-[224px] overflow-y-auto flex flex-col gap-y-0.5 p-1'}
       >
         {showableData.map(({ selected, label, onClick }, index) => {
           return (
diff --git a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
index fbbaaf216823..8d736addea16 100644
--- a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
+++ b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
@@ -90,7 +90,7 @@ export const SearchableSegmentsSection = ({
         )}
       </div>
 
-      <div className="max-h-[210px] overflow-y-scroll">
+      <div className="max-h-[210px] overflow-y-auto">
         {showableData.map((segment) => {
           return (
             <Tooltip
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 94cafaee30f5..5e39fced54c5 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -28,7 +28,19 @@ export default function MoreLink({ linkProps, list, onClick, loading }) {
     }
   }, [])
 
-  if (!list || list.length === 0 || !linkProps || loading) {
+  const baseClassName =
+    'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
+  const icon = detailsIcon()
+
+  if (loading) {
+    return (
+      <Tooltip info="View details" containerRef={portalRef}>
+        <div className={baseClassName}>{icon}</div>
+      </Tooltip>
+    )
+  }
+
+  if (!list || list.length === 0 || !linkProps) {
     return null
   }
 
@@ -36,10 +48,10 @@ export default function MoreLink({ linkProps, list, onClick, loading }) {
     <Tooltip info="View details" containerRef={portalRef}>
       <AppNavigationLink
         {...linkProps}
-        className="flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150"
+        className={baseClassName}
         onClick={onClick}
       >
-        {detailsIcon()}
+        {icon}
       </AppNavigationLink>
     </Tooltip>
   )

From f3d6c56f14188aaee8bab5cc4ac5bb3f18a4c907 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 20:34:40 +0100
Subject: [PATCH 11/23] Remove group/report class from report layout

---
 assets/js/dashboard/stats/reports/report-layout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/stats/reports/report-layout.js b/assets/js/dashboard/stats/reports/report-layout.js
index c504c35fb122..acbd83ce9a71 100644
--- a/assets/js/dashboard/stats/reports/report-layout.js
+++ b/assets/js/dashboard/stats/reports/report-layout.js
@@ -5,7 +5,7 @@ export function ReportLayout({ children, className = undefined }) {
   return (
     <div
       className={classNames(
-        'group/report relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem',
+        'relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem',
         className
       )}
     >

From b430b6c66aaa653f14d9901d95cb3b90cb29f083 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 20:54:32 +0100
Subject: [PATCH 12/23] Improve tab button styles

---
 assets/js/dashboard/components/tabs.tsx | 29 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/assets/js/dashboard/components/tabs.tsx b/assets/js/dashboard/components/tabs.tsx
index cc87690beddd..1ed9ec022b01 100644
--- a/assets/js/dashboard/components/tabs.tsx
+++ b/assets/js/dashboard/components/tabs.tsx
@@ -16,7 +16,7 @@ export const TabWrapper = ({
 }) => (
   <div
     className={classNames(
-      'flex items-baseline gap-x-3 text-xs font-medium text-gray-500 dark:text-gray-400',
+      'flex items-baseline gap-x-3.5 text-xs font-medium text-gray-500 dark:text-gray-400',
       className
     )}
   >
@@ -32,14 +32,11 @@ const TabButtonText = ({
   active: boolean
 }) => (
   <span
-    className={classNames(
-      'truncate text-left text-xs uppercase transition-colors duration-150',
-      {
-        'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-semibold cursor-pointer':
-          !active,
-        'text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]': active
-      }
-    )}
+    className={classNames('truncate text-left text-xs uppercase', {
+      'text-gray-500 dark:text-gray-400 group-hover/tab:text-gray-800 dark:group-hover/tab:text-gray-200 font-semibold cursor-pointer':
+        !active,
+      'text-gray-900 dark:text-gray-100 font-bold tracking-[-.01em]': active
+    })}
   >
     {children}
   </span>
@@ -62,7 +59,7 @@ export const TabButton = ({
     })}
   >
     <button
-      className={classNames('flex rounded-sm', className)}
+      className={classNames('group/tab flex rounded-sm', className)}
       onClick={onClick}
     >
       <TabButtonText active={active}>{children}</TabButtonText>
@@ -95,13 +92,19 @@ export const DropdownTabButton = ({
             })}
           >
             <Popover.Button
-              className="inline-flex justify-between rounded-xs"
+              className="group/tab inline-flex justify-between rounded-xs"
               ref={dropdownButtonRef}
             >
               <TabButtonText active={active}>{children}</TabButtonText>
 
-              <div className="ml-1" aria-hidden="true">
-                <ChevronDownIcon className="size-4" />
+              <div className="ml-0.5 -mr-1" aria-hidden="true">
+                <ChevronDownIcon
+                  className={classNames('size-4', {
+                    'text-gray-500 dark:text-gray-400 group-hover/tab:text-gray-800 dark:group-hover/tab:text-gray-200':
+                      !active,
+                    'text-gray-900 dark:text-gray-100': active
+                  })}
+                />
               </div>
             </Popover.Button>
           </div>

From 973e73d592b4b231b4a7506072835ff2cc6f47fc Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 18 Dec 2025 21:08:21 +0100
Subject: [PATCH 13/23] Change font weight for report header

---
 assets/js/dashboard/stats/reports/list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index cb4a3e5e84c3..2515cab32f7d 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -282,7 +282,7 @@ export default function ListReport<
       })
 
     return (
-      <div className="pt-3 w-full text-xs font-semibold text-gray-500 flex items-center dark:text-gray-400">
+      <div className="pt-3 w-full text-xs font-medium text-gray-500 flex items-center dark:text-gray-400">
         <span className="grow truncate">{keyLabel}</span>
         {metricLabels}
       </div>

From add6ac6e71d7c03e03e8e28ec50f56f3b7afd1d3 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 23 Dec 2025 18:25:36 +0000
Subject: [PATCH 14/23] Apply feedback on MoreLink state handling

---
 .../js/dashboard/hooks/use-more-link-data.tsx | 31 ------
 .../dashboard/stats/behaviours/conversions.js |  4 +-
 .../stats/behaviours/goal-conversions.js      |  8 +-
 assets/js/dashboard/stats/behaviours/index.js | 51 +++++++---
 assets/js/dashboard/stats/behaviours/props.js |  3 +-
 assets/js/dashboard/stats/devices/index.js    | 99 ++++++++++---------
 assets/js/dashboard/stats/more-link.js        | 12 +--
 assets/js/dashboard/stats/pages/index.js      | 59 +++++++----
 .../dashboard/stats/sources/referrer-list.js  | 33 ++++---
 .../dashboard/stats/sources/search-terms.tsx  | 23 +++--
 .../js/dashboard/stats/sources/source-list.js | 76 +++++++++-----
 11 files changed, 224 insertions(+), 175 deletions(-)
 delete mode 100644 assets/js/dashboard/hooks/use-more-link-data.tsx

diff --git a/assets/js/dashboard/hooks/use-more-link-data.tsx b/assets/js/dashboard/hooks/use-more-link-data.tsx
deleted file mode 100644
index e4f086bfec54..000000000000
--- a/assets/js/dashboard/hooks/use-more-link-data.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useCallback, useState } from 'react'
-import { AppNavigationLinkProps } from '../navigation/use-app-navigate'
-
-export function useMoreLinkData() {
-  const [listData, setListData] = useState<unknown[] | null>(null)
-  const [linkProps, setLinkProps] = useState<AppNavigationLinkProps | null>(
-    null
-  )
-  const [listLoading, setListLoading] = useState(true)
-
-  const onListUpdate = useCallback(
-    (
-      list: unknown[] | null,
-      linkProps: AppNavigationLinkProps | undefined,
-      loading: boolean
-    ) => {
-      setListData(list)
-      setLinkProps(linkProps ?? null)
-      setListLoading(loading)
-    },
-    []
-  )
-
-  const reset = useCallback(() => {
-    setListData(null)
-    setLinkProps(null)
-    setListLoading(true)
-  }, [])
-
-  return { onListUpdate, listData, linkProps, listLoading, reset }
-}
diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 3c894dfe47fd..64ef1234896e 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -10,8 +10,7 @@ import { conversionsRoute } from '../../router'
 
 export default function Conversions({
   afterFetchData,
-  onGoalFilterClick,
-  onListUpdate
+  onGoalFilterClick
 }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
@@ -60,7 +59,6 @@ export default function Conversions({
       }}
       color="bg-red-50 group-hover/row:bg-red-100"
       colMinWidth={90}
-      onListUpdate={onListUpdate}
     />
   )
 }
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index dd33a1a19bb9..c741460bf11e 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -41,7 +41,7 @@ export function specialTitleWhenGoalFilter(query, defaultTitle) {
   return getSpecialGoal(query)?.title || defaultTitle
 }
 
-function SpecialPropBreakdown({ prop, afterFetchData, onListUpdate }) {
+function SpecialPropBreakdown({ prop, afterFetchData }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
@@ -95,15 +95,13 @@ function SpecialPropBreakdown({ prop, afterFetchData, onListUpdate }) {
       getExternalLinkUrl={getExternalLinkUrlFactory()}
       color="bg-red-50"
       colMinWidth={90}
-      onListUpdate={onListUpdate}
     />
   )
 }
 
 export default function GoalConversions({
   afterFetchData,
-  onGoalFilterClick,
-  onListUpdate
+  onGoalFilterClick
 }) {
   const { query } = useQueryContext()
 
@@ -113,7 +111,6 @@ export default function GoalConversions({
       <SpecialPropBreakdown
         prop={specialGoal.prop}
         afterFetchData={afterFetchData}
-        onListUpdate={onListUpdate}
       />
     )
   } else {
@@ -121,7 +118,6 @@ export default function GoalConversions({
       <Conversions
         onGoalFilterClick={onGoalFilterClick}
         afterFetchData={afterFetchData}
-        onListUpdate={onListUpdate}
       />
     )
   }
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 5887b0f52a13..3f598d5a0705 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -18,11 +18,11 @@ import { useUserContext } from '../../user-context'
 import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
 import { Pill } from '../../components/pill'
 import * as api from '../../api'
 import * as url from '../../util/url'
+import { conversionsRoute, customPropsRoute } from '../../router'
 
 /*global BUILD_EXTRA*/
 /*global require*/
@@ -104,8 +104,8 @@ export default function Behaviours({ importedDataInView }) {
     useState(false)
 
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const { onListUpdate, listData, linkProps, listLoading, reset } =
-    useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
 
   const onGoalFilterClick = useCallback((e) => {
     const goalName = e.target.innerHTML
@@ -140,8 +140,13 @@ export default function Behaviours({ importedDataInView }) {
 
   useEffect(() => setLoading(true), [query, mode])
   useEffect(() => {
-    reset()
-  }, [query, mode, reset])
+    setMoreLinkClickable(false)
+    if (mode === PROPS && !selectedPropKey) {
+      setMoreLinkVisible(false)
+    } else {
+      setMoreLinkVisible(true)
+    }
+  }, [query, mode, selectedPropKey])
 
   function disableMode(mode) {
     setEnabledModes(
@@ -259,6 +264,11 @@ export default function Behaviours({ importedDataInView }) {
   function afterFetchData(apiResponse) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      setMoreLinkClickable(true)
+    } else {
+      setMoreLinkVisible(false)
+    }
   }
 
   function renderConversions() {
@@ -267,7 +277,6 @@ export default function Behaviours({ importedDataInView }) {
         <GoalConversions
           onGoalFilterClick={onGoalFilterClick}
           afterFetchData={afterFetchData}
-          onListUpdate={onListUpdate}
         />
       )
     } else if (adminAccess) {
@@ -329,7 +338,6 @@ export default function Behaviours({ importedDataInView }) {
         <Properties
           propKey={selectedPropKey}
           afterFetchData={afterFetchData}
-          onListUpdate={onListUpdate}
         />
       )
     } else if (adminAccess) {
@@ -412,6 +420,27 @@ export default function Behaviours({ importedDataInView }) {
     return FUNNELS
   }
 
+  function moreLinkProps() {
+    switch (mode) {
+      case CONVERSIONS:
+        return {
+          path: conversionsRoute.path,
+          search: (search) => search
+        }
+      case PROPS:
+        if (!selectedPropKey) {
+          return null
+        }
+        return {
+          path: customPropsRoute.path,
+          params: { propKey: url.maybeEncodeRouteParam(selectedPropKey) },
+          search: (search) => search
+        }
+      default:
+        return null
+    }
+  }
+
   function getEnabledModes() {
     let enabledModes = []
 
@@ -548,11 +577,9 @@ export default function Behaviours({ importedDataInView }) {
           {renderImportedQueryUnsupportedWarning()}
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          className=""
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={moreLinkProps()}
         />
       </ReportHeader>
       {renderContent()}
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index c7aa8a87603f..1243f08484de 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -8,7 +8,7 @@ import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { customPropsRoute } from '../../router'
 
-export default function Properties({ propKey, afterFetchData, onListUpdate }) {
+export default function Properties({ propKey, afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -54,7 +54,6 @@ export default function Properties({ propKey, afterFetchData, onListUpdate }) {
         }}
         color="bg-red-50 group-hover/row:bg-red-100"
         colMinWidth={90}
-        onListUpdate={onListUpdate}
       />
     )
   }
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 9d7bd7258e25..4aafd3ddd387 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -22,7 +22,6 @@ import {
   operatingSystemVersionsRoute,
   screenSizesRoute
 } from '../../router'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
 
 // Icons copied from https://github.com/alrra/browser-logos
@@ -59,7 +58,7 @@ export function browserIconFor(browser) {
   )
 }
 
-function Browsers({ afterFetchData, onListUpdate }) {
+function Browsers({ afterFetchData }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
   function fetchData() {
@@ -94,16 +93,11 @@ function Browsers({ afterFetchData, onListUpdate }) {
       keyLabel="Browser"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{
-        path: browsersRoute.path,
-        search: (search) => search
-      }}
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function BrowserVersions({ afterFetchData, onListUpdate }) {
+function BrowserVersions({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -141,11 +135,6 @@ function BrowserVersions({ afterFetchData, onListUpdate }) {
       keyLabel="Browser version"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{
-        path: browserVersionsRoute.path,
-        search: (search) => search
-      }}
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -178,7 +167,7 @@ export function osIconFor(os) {
   )
 }
 
-function OperatingSystems({ afterFetchData, onListUpdate }) {
+function OperatingSystems({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -215,16 +204,11 @@ function OperatingSystems({ afterFetchData, onListUpdate }) {
       renderIcon={renderIcon}
       keyLabel="Operating system"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: operatingSystemsRoute.path,
-        search: (search) => search
-      }}
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function OperatingSystemVersions({ afterFetchData, onListUpdate }) {
+function OperatingSystemVersions({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -263,16 +247,11 @@ function OperatingSystemVersions({ afterFetchData, onListUpdate }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Operating System Version"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: operatingSystemVersionsRoute.path,
-        search: (search) => search
-      }}
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function ScreenSizes({ afterFetchData, onListUpdate }) {
+function ScreenSizes({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -308,11 +287,6 @@ function ScreenSizes({ afterFetchData, onListUpdate }) {
       keyLabel="Device"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{
-        path: screenSizesRoute.path,
-        search: (search) => search
-      }}
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -451,24 +425,62 @@ export default function Devices() {
   const [mode, setMode] = useState(storedTab || 'browser')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const { onListUpdate, listData, linkProps, listLoading, reset } =
-    useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
     setMode(mode)
-    reset()
   }
 
   function afterFetchData(apiResponse) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      setMoreLinkClickable(true)
+    } else {
+      setMoreLinkVisible(false)
+    }
   }
 
-  useEffect(() => setLoading(true), [query, mode])
   useEffect(() => {
-    reset()
-  }, [query, mode, reset])
+    setLoading(true)
+    setMoreLinkVisible(true)
+    setMoreLinkClickable(false)
+  }, [query, mode])
+
+  function moreLinkProps() {
+    switch (mode) {
+      case 'browser':
+        if (isFilteringOnFixedValue(query, 'browser')) {
+          return {
+            path: browserVersionsRoute.path,
+            search: (search) => search
+          }
+        }
+        return {
+          path: browsersRoute.path,
+          search: (search) => search
+        }
+      case 'os':
+        if (isFilteringOnFixedValue(query, 'os')) {
+          return {
+            path: operatingSystemVersionsRoute.path,
+            search: (search) => search
+          }
+        }
+        return {
+          path: operatingSystemsRoute.path,
+          search: (search) => search
+        }
+      case 'size':
+      default:
+        return {
+          path: screenSizesRoute.path,
+          search: (search) => search
+        }
+    }
+  }
 
   function renderContent() {
     switch (mode) {
@@ -477,14 +489,12 @@ export default function Devices() {
           return (
             <BrowserVersions
               afterFetchData={afterFetchData}
-              onListUpdate={onListUpdate}
             />
           )
         }
         return (
           <Browsers
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
       case 'os':
@@ -492,14 +502,12 @@ export default function Devices() {
           return (
             <OperatingSystemVersions
               afterFetchData={afterFetchData}
-              onListUpdate={onListUpdate}
             />
           )
         }
         return (
           <OperatingSystems
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
       case 'size':
@@ -507,7 +515,6 @@ export default function Devices() {
         return (
           <ScreenSizes
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
     }
@@ -538,11 +545,9 @@ export default function Devices() {
           />
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          className=""
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={moreLinkProps()}
         />
       </ReportHeader>
       {renderContent()}
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 5e39fced54c5..6707ee05fc33 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -19,7 +19,7 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({ linkProps, list, onClick, loading }) {
+export default function MoreLink({ linkProps, visible, clickable, onClick = undefined }) {
   const portalRef = useRef(null)
 
   useEffect(() => {
@@ -32,7 +32,11 @@ export default function MoreLink({ linkProps, list, onClick, loading }) {
     'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
   const icon = detailsIcon()
 
-  if (loading) {
+  if (!visible) {
+    return null
+  }
+
+  if (!clickable || !linkProps) {
     return (
       <Tooltip info="View details" containerRef={portalRef}>
         <div className={baseClassName}>{icon}</div>
@@ -40,10 +44,6 @@ export default function MoreLink({ linkProps, list, onClick, loading }) {
     )
   }
 
-  if (!list || list.length === 0 || !linkProps) {
-    return null
-  }
-
   return (
     <Tooltip info="View details" containerRef={portalRef}>
       <AppNavigationLink
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index 1353424ac08b..a51487c82266 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -13,10 +13,9 @@ import { entryPagesRoute, exitPagesRoute, topPagesRoute } from '../../router'
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
 
-function EntryPages({ afterFetchData, onListUpdate }) {
+function EntryPages({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -60,12 +59,11 @@ function EntryPages({ afterFetchData, onListUpdate }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function ExitPages({ afterFetchData, onListUpdate }) {
+function ExitPages({ afterFetchData }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
   function fetchData() {
@@ -109,12 +107,11 @@ function ExitPages({ afterFetchData, onListUpdate }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function TopPages({ afterFetchData, onListUpdate }) {
+function TopPages({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -154,7 +151,6 @@ function TopPages({ afterFetchData, onListUpdate }) {
       }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -168,24 +164,50 @@ export default function Pages() {
   const [mode, setMode] = useState(storedTab || 'pages')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const { onListUpdate, listData, linkProps, listLoading, reset } =
-    useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
     setMode(mode)
-    reset()
   }
 
   function afterFetchData(apiResponse) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      setMoreLinkClickable(true)
+    } else {
+      setMoreLinkVisible(false)
+    }
   }
 
-  useEffect(() => setLoading(true), [query, mode])
   useEffect(() => {
-    reset()
-  }, [query, mode, reset])
+    setLoading(true)
+    setMoreLinkVisible(true)
+    setMoreLinkClickable(false)
+  }, [query, mode])
+
+  function moreLinkProps() {
+    switch (mode) {
+      case 'entry-pages':
+        return {
+          path: entryPagesRoute.path,
+          search: (search) => search
+        }
+      case 'exit-pages':
+        return {
+          path: exitPagesRoute.path,
+          search: (search) => search
+        }
+      case 'pages':
+      default:
+        return {
+          path: topPagesRoute.path,
+          search: (search) => search
+        }
+    }
+  }
 
   function renderContent() {
     switch (mode) {
@@ -193,14 +215,12 @@ export default function Pages() {
         return (
           <EntryPages
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
       case 'exit-pages':
         return (
           <ExitPages
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
       case 'pages':
@@ -208,7 +228,6 @@ export default function Pages() {
         return (
           <TopPages
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
     }
@@ -244,11 +263,9 @@ export default function Pages() {
           />
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          className=""
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={moreLinkProps()}
         />
       </ReportHeader>
       {renderContent()}
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index 09ada8e8287e..d9ee9270b028 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -12,7 +12,6 @@ import { SourceFavicon } from './source-favicon'
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
 
 const NO_REFERRER = 'Direct / None'
@@ -22,9 +21,14 @@ export default function Referrers({ source }) {
   const site = useSiteContext()
   const [skipImportedReason, setSkipImportedReason] = useState(null)
   const [loading, setLoading] = useState(true)
-  const { onListUpdate, listData, linkProps, listLoading } = useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
 
-  useEffect(() => setLoading(true), [query])
+  useEffect(() => {
+    setLoading(true)
+    setMoreLinkVisible(true)
+    setMoreLinkClickable(false)
+  }, [query])
 
   function fetchReferrers() {
     return api.get(
@@ -37,6 +41,11 @@ export default function Referrers({ source }) {
   function afterFetchReferrers(apiResponse) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      setMoreLinkClickable(true)
+    } else {
+      setMoreLinkVisible(false)
+    }
   }
 
   function getExternalLinkUrl(referrer) {
@@ -88,11 +97,13 @@ export default function Referrers({ source }) {
           />
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          className=""
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={{
+            path: referrersDrilldownRoute.path,
+            params: { referrer: url.maybeEncodeRouteParam(source) },
+            search: (search) => search
+          }}
         />
       </ReportHeader>
       <ListReport
@@ -101,15 +112,9 @@ export default function Referrers({ source }) {
         getFilterInfo={getFilterInfo}
         keyLabel="Referrer"
         metrics={chooseMetrics()}
-        detailsLinkProps={{
-          path: referrersDrilldownRoute.path,
-          params: { referrer: url.maybeEncodeRouteParam(source) },
-          search: (search) => search
-        }}
         getExternalLinkUrl={getExternalLinkUrl}
         renderIcon={renderIcon}
         color="bg-blue-50"
-        onListUpdate={onListUpdate}
       />
     </ReportLayout>
   )
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index bd1ebea3cb1c..deb5b13a727a 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -10,8 +10,8 @@ import { PlausibleSite, useSiteContext } from '../../site-context'
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
+import { referrersGoogleRoute } from '../../router'
 
 interface SearchTerm {
   name: string
@@ -77,7 +77,8 @@ function ConfigureSearchTermsCTA({
 export function SearchTerms() {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const { listData, linkProps, listLoading } = useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = React.useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = React.useState(false)
 
   const [loading, setLoading] = React.useState(true)
   const [errorPayload, setErrorPayload] = React.useState<null | ErrorPayload>(
@@ -98,11 +99,17 @@ export function SearchTerms() {
         setLoading(false)
         setSearchTerms(res.results)
         setErrorPayload(null)
+        if (res.results && res.results.length > 0) {
+          setMoreLinkClickable(true)
+        } else {
+          setMoreLinkVisible(false)
+        }
       })
       .catch((error) => {
         setLoading(false)
         setSearchTerms(null)
         setErrorPayload(error.payload)
+        setMoreLinkVisible(false)
       })
   }, [query, site.domain])
 
@@ -110,6 +117,8 @@ export function SearchTerms() {
     if (visible) {
       setLoading(true)
       setSearchTerms([])
+      setMoreLinkVisible(true)
+      setMoreLinkClickable(false)
       fetchSearchTerms()
     }
   }, [query, fetchSearchTerms, visible])
@@ -191,10 +200,12 @@ export function SearchTerms() {
           </TabWrapper>
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={{
+            path: referrersGoogleRoute.path,
+            search: (search: any) => search
+          }}
         />
       </ReportHeader>
       <div className="relative grow">
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 21ffee85a482..c8fc17a1ca3c 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -26,7 +26,6 @@ import {
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
-import { useMoreLinkData } from '../../hooks/use-more-link-data'
 import MoreLink from '../more-link'
 
 const UTM_TAGS = {
@@ -53,7 +52,7 @@ const UTM_TAGS = {
   utm_term: { title: 'UTM terms', label: 'Term', endpoint: '/utm_terms' }
 }
 
-function AllSources({ afterFetchData, onListUpdate }) {
+function AllSources({ afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   function fetchData() {
@@ -87,15 +86,13 @@ function AllSources({ afterFetchData, onListUpdate }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Source"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: sourcesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-blue-50 group-hover/row:bg-blue-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Channels({ onClick, afterFetchData, onListUpdate }) {
+function Channels({ onClick, afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
 
@@ -127,17 +124,12 @@ function Channels({ onClick, afterFetchData, onListUpdate }) {
       keyLabel="Channel"
       onClick={onClick}
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: channelsRoute.path,
-        search: (search) => search
-      }}
       color="bg-blue-50 group-hover/row:bg-blue-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function UTMSources({ tab, afterFetchData, onListUpdate }) {
+function UTMSources({ tab, afterFetchData }) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   const utmTag = UTM_TAGS[tab]
@@ -177,9 +169,7 @@ function UTMSources({ tab, afterFetchData, onListUpdate }) {
       getFilterInfo={getFilterInfo}
       keyLabel={utmTag.label}
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: route?.path, search: (search) => search }}
       color="bg-blue-50 group-hover/row:bg-blue-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -192,14 +182,15 @@ export default function SourceList() {
   const [currentTab, setCurrentTab] = useState(storedTab || 'all')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const { onListUpdate, listData, linkProps, listLoading, reset } =
-    useMoreLinkData()
+  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
+  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
   const previousQuery = usePrevious(query)
 
-  useEffect(() => setLoading(true), [query, currentTab])
   useEffect(() => {
-    reset()
-  }, [query, currentTab, reset])
+    setLoading(true)
+    setMoreLinkVisible(true)
+    setMoreLinkClickable(false)
+  }, [query, currentTab])
 
   useEffect(() => {
     const isRemovingFilter = (filterName) => {
@@ -221,7 +212,6 @@ export default function SourceList() {
     return () => {
       storage.setItem(tabKey, tab)
       setCurrentTab(tab)
-      reset()
     }
   }
 
@@ -232,6 +222,43 @@ export default function SourceList() {
   function afterFetchData(apiResponse) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      setMoreLinkClickable(true)
+    } else {
+      setMoreLinkVisible(false)
+    }
+  }
+
+  function moreLinkProps() {
+    if (Object.keys(UTM_TAGS).includes(currentTab)) {
+      const route = {
+        utm_medium: utmMediumsRoute,
+        utm_source: utmSourcesRoute,
+        utm_campaign: utmCampaignsRoute,
+        utm_content: utmContentsRoute,
+        utm_term: utmTermsRoute
+      }[currentTab]
+      return route
+        ? {
+            path: route.path,
+            search: (search) => search
+          }
+        : null
+    }
+
+    switch (currentTab) {
+      case 'channels':
+        return {
+          path: channelsRoute.path,
+          search: (search) => search
+        }
+      case 'all':
+      default:
+        return {
+          path: sourcesRoute.path,
+          search: (search) => search
+        }
+    }
   }
 
   function renderContent() {
@@ -240,7 +267,6 @@ export default function SourceList() {
         <UTMSources
           tab={currentTab}
           afterFetchData={afterFetchData}
-          onListUpdate={onListUpdate}
         />
       )
     }
@@ -251,7 +277,6 @@ export default function SourceList() {
           <Channels
             onClick={onChannelClick}
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
       case 'all':
@@ -259,7 +284,6 @@ export default function SourceList() {
         return (
           <AllSources
             afterFetchData={afterFetchData}
-            onListUpdate={onListUpdate}
           />
         )
     }
@@ -302,11 +326,9 @@ export default function SourceList() {
           />
         </div>
         <MoreLink
-          list={listData}
-          linkProps={linkProps}
-          loading={listLoading}
-          className=""
-          onClick={undefined}
+          visible={moreLinkVisible}
+          clickable={moreLinkClickable}
+          linkProps={moreLinkProps()}
         />
       </ReportHeader>
       {renderContent()}

From 10e90d82b83bec2fc53100f2782e3667cd3cec19 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 23 Dec 2025 18:37:31 +0000
Subject: [PATCH 15/23] Switch to MoreLinkState enum for better state
 management

---
 assets/js/dashboard/stats/behaviours/index.js    | 16 +++++++---------
 assets/js/dashboard/stats/devices/index.js       | 14 ++++++--------
 assets/js/dashboard/stats/more-link-state.js     |  6 ++++++
 assets/js/dashboard/stats/more-link.js           |  7 ++++---
 assets/js/dashboard/stats/pages/index.js         | 14 ++++++--------
 .../js/dashboard/stats/sources/referrer-list.js  | 14 ++++++--------
 .../js/dashboard/stats/sources/search-terms.tsx  | 16 +++++++---------
 assets/js/dashboard/stats/sources/source-list.js | 14 ++++++--------
 8 files changed, 48 insertions(+), 53 deletions(-)
 create mode 100644 assets/js/dashboard/stats/more-link-state.js

diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 3f598d5a0705..136fb52b5bd9 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -19,6 +19,7 @@ import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
 import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 import { Pill } from '../../components/pill'
 import * as api from '../../api'
 import * as url from '../../util/url'
@@ -104,8 +105,7 @@ export default function Behaviours({ importedDataInView }) {
     useState(false)
 
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
+  const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
 
   const onGoalFilterClick = useCallback((e) => {
     const goalName = e.target.innerHTML
@@ -140,11 +140,10 @@ export default function Behaviours({ importedDataInView }) {
 
   useEffect(() => setLoading(true), [query, mode])
   useEffect(() => {
-    setMoreLinkClickable(false)
     if (mode === PROPS && !selectedPropKey) {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     } else {
-      setMoreLinkVisible(true)
+      setMoreLinkState(MoreLinkState.LOADING)
     }
   }, [query, mode, selectedPropKey])
 
@@ -265,9 +264,9 @@ export default function Behaviours({ importedDataInView }) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
     if (apiResponse.results && apiResponse.results.length > 0) {
-      setMoreLinkClickable(true)
+      setMoreLinkState(MoreLinkState.READY)
     } else {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     }
   }
 
@@ -577,8 +576,7 @@ export default function Behaviours({ importedDataInView }) {
           {renderImportedQueryUnsupportedWarning()}
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={moreLinkProps()}
         />
       </ReportHeader>
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 4aafd3ddd387..80ea815662e6 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -23,6 +23,7 @@ import {
   screenSizesRoute
 } from '../../router'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
 // Icons copied from https://github.com/alrra/browser-logos
 const BROWSER_ICONS = {
@@ -425,8 +426,7 @@ export default function Devices() {
   const [mode, setMode] = useState(storedTab || 'browser')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
+  const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
@@ -437,16 +437,15 @@ export default function Devices() {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
     if (apiResponse.results && apiResponse.results.length > 0) {
-      setMoreLinkClickable(true)
+      setMoreLinkState(MoreLinkState.READY)
     } else {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     }
   }
 
   useEffect(() => {
     setLoading(true)
-    setMoreLinkVisible(true)
-    setMoreLinkClickable(false)
+    setMoreLinkState(MoreLinkState.LOADING)
   }, [query, mode])
 
   function moreLinkProps() {
@@ -545,8 +544,7 @@ export default function Devices() {
           />
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={moreLinkProps()}
         />
       </ReportHeader>
diff --git a/assets/js/dashboard/stats/more-link-state.js b/assets/js/dashboard/stats/more-link-state.js
new file mode 100644
index 000000000000..ca3885f8ce9b
--- /dev/null
+++ b/assets/js/dashboard/stats/more-link-state.js
@@ -0,0 +1,6 @@
+export const MoreLinkState = {
+  HIDDEN: 'hidden',
+  LOADING: 'loading',
+  READY: 'ready'
+}
+
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 6707ee05fc33..51108b575a11 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
 import { Tooltip } from '../util/tooltip'
+import { MoreLinkState } from './more-link-state'
 
 function detailsIcon() {
   return (
@@ -19,7 +20,7 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({ linkProps, visible, clickable, onClick = undefined }) {
+export default function MoreLink({ linkProps, state, onClick = undefined }) {
   const portalRef = useRef(null)
 
   useEffect(() => {
@@ -32,11 +33,11 @@ export default function MoreLink({ linkProps, visible, clickable, onClick = unde
     'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
   const icon = detailsIcon()
 
-  if (!visible) {
+  if (state === MoreLinkState.HIDDEN) {
     return null
   }
 
-  if (!clickable || !linkProps) {
+  if (state === MoreLinkState.LOADING || !linkProps) {
     return (
       <Tooltip info="View details" containerRef={portalRef}>
         <div className={baseClassName}>{icon}</div>
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index a51487c82266..6f34bfbee9b5 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -14,6 +14,7 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
 function EntryPages({ afterFetchData }) {
   const { query } = useQueryContext()
@@ -164,8 +165,7 @@ export default function Pages() {
   const [mode, setMode] = useState(storedTab || 'pages')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
+  const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
 
   function switchTab(mode) {
     storage.setItem(tabKey, mode)
@@ -176,16 +176,15 @@ export default function Pages() {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
     if (apiResponse.results && apiResponse.results.length > 0) {
-      setMoreLinkClickable(true)
+      setMoreLinkState(MoreLinkState.READY)
     } else {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     }
   }
 
   useEffect(() => {
     setLoading(true)
-    setMoreLinkVisible(true)
-    setMoreLinkClickable(false)
+    setMoreLinkState(MoreLinkState.LOADING)
   }, [query, mode])
 
   function moreLinkProps() {
@@ -263,8 +262,7 @@ export default function Pages() {
           />
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={moreLinkProps()}
         />
       </ReportHeader>
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index d9ee9270b028..42ce1d3e2865 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -13,6 +13,7 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
 const NO_REFERRER = 'Direct / None'
 
@@ -21,13 +22,11 @@ export default function Referrers({ source }) {
   const site = useSiteContext()
   const [skipImportedReason, setSkipImportedReason] = useState(null)
   const [loading, setLoading] = useState(true)
-  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
+  const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
 
   useEffect(() => {
     setLoading(true)
-    setMoreLinkVisible(true)
-    setMoreLinkClickable(false)
+    setMoreLinkState(MoreLinkState.LOADING)
   }, [query])
 
   function fetchReferrers() {
@@ -42,9 +41,9 @@ export default function Referrers({ source }) {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
     if (apiResponse.results && apiResponse.results.length > 0) {
-      setMoreLinkClickable(true)
+      setMoreLinkState(MoreLinkState.READY)
     } else {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     }
   }
 
@@ -97,8 +96,7 @@ export default function Referrers({ source }) {
           />
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={{
             path: referrersDrilldownRoute.path,
             params: { referrer: url.maybeEncodeRouteParam(source) },
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index deb5b13a727a..1ee70bd2b900 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -11,6 +11,7 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 import { referrersGoogleRoute } from '../../router'
 
 interface SearchTerm {
@@ -77,8 +78,7 @@ function ConfigureSearchTermsCTA({
 export function SearchTerms() {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const [moreLinkVisible, setMoreLinkVisible] = React.useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = React.useState(false)
+  const [moreLinkState, setMoreLinkState] = React.useState(MoreLinkState.LOADING)
 
   const [loading, setLoading] = React.useState(true)
   const [errorPayload, setErrorPayload] = React.useState<null | ErrorPayload>(
@@ -100,16 +100,16 @@ export function SearchTerms() {
         setSearchTerms(res.results)
         setErrorPayload(null)
         if (res.results && res.results.length > 0) {
-          setMoreLinkClickable(true)
+          setMoreLinkState(MoreLinkState.READY)
         } else {
-          setMoreLinkVisible(false)
+          setMoreLinkState(MoreLinkState.HIDDEN)
         }
       })
       .catch((error) => {
         setLoading(false)
         setSearchTerms(null)
         setErrorPayload(error.payload)
-        setMoreLinkVisible(false)
+        setMoreLinkState(MoreLinkState.HIDDEN)
       })
   }, [query, site.domain])
 
@@ -117,8 +117,7 @@ export function SearchTerms() {
     if (visible) {
       setLoading(true)
       setSearchTerms([])
-      setMoreLinkVisible(true)
-      setMoreLinkClickable(false)
+      setMoreLinkState(MoreLinkState.LOADING)
       fetchSearchTerms()
     }
   }, [query, fetchSearchTerms, visible])
@@ -200,8 +199,7 @@ export function SearchTerms() {
           </TabWrapper>
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={{
             path: referrersGoogleRoute.path,
             search: (search: any) => search
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index c8fc17a1ca3c..6022ed3a22aa 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -27,6 +27,7 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
 const UTM_TAGS = {
   utm_medium: {
@@ -182,14 +183,12 @@ export default function SourceList() {
   const [currentTab, setCurrentTab] = useState(storedTab || 'all')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const [moreLinkVisible, setMoreLinkVisible] = useState(true)
-  const [moreLinkClickable, setMoreLinkClickable] = useState(false)
+  const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
   const previousQuery = usePrevious(query)
 
   useEffect(() => {
     setLoading(true)
-    setMoreLinkVisible(true)
-    setMoreLinkClickable(false)
+    setMoreLinkState(MoreLinkState.LOADING)
   }, [query, currentTab])
 
   useEffect(() => {
@@ -223,9 +222,9 @@ export default function SourceList() {
     setLoading(false)
     setSkipImportedReason(apiResponse.skip_imported_reason)
     if (apiResponse.results && apiResponse.results.length > 0) {
-      setMoreLinkClickable(true)
+      setMoreLinkState(MoreLinkState.READY)
     } else {
-      setMoreLinkVisible(false)
+      setMoreLinkState(MoreLinkState.HIDDEN)
     }
   }
 
@@ -326,8 +325,7 @@ export default function SourceList() {
           />
         </div>
         <MoreLink
-          visible={moreLinkVisible}
-          clickable={moreLinkClickable}
+          state={moreLinkState}
           linkProps={moreLinkProps()}
         />
       </ReportHeader>

From 2a8bbdc7264d57e6b313ac01d7438f8314ced5a3 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 23 Dec 2025 18:41:55 +0000
Subject: [PATCH 16/23] Linting

---
 assets/js/dashboard/stats/sources/search-terms.tsx | 2 +-
 assets/js/dashboard/stats/sources/source-list.js   | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index 1ee70bd2b900..9194053fe316 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -202,7 +202,7 @@ export function SearchTerms() {
           state={moreLinkState}
           linkProps={{
             path: referrersGoogleRoute.path,
-            search: (search: any) => search
+            search: (search: URLSearchParams) => search
           }}
         />
       </ReportHeader>
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 6022ed3a22aa..9ce67283ae43 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -135,14 +135,6 @@ function UTMSources({ tab, afterFetchData }) {
   const site = useSiteContext()
   const utmTag = UTM_TAGS[tab]
 
-  const route = {
-    utm_medium: utmMediumsRoute,
-    utm_source: utmSourcesRoute,
-    utm_campaign: utmCampaignsRoute,
-    utm_content: utmContentsRoute,
-    utm_term: utmTermsRoute
-  }[tab]
-
   function fetchData() {
     return api.get(url.apiPath(site, utmTag.endpoint), query, { limit: 9 })
   }

From c26feb3f6058292529efd38885215cca6cf683c7 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 23 Dec 2025 18:54:47 +0000
Subject: [PATCH 17/23] Fix formatting

---
 .../dashboard/stats/behaviours/conversions.js |  5 +--
 .../stats/behaviours/goal-conversions.js      |  5 +--
 assets/js/dashboard/stats/behaviours/index.js | 10 ++----
 assets/js/dashboard/stats/devices/index.js    | 35 ++++---------------
 assets/js/dashboard/stats/more-link-state.js  |  1 -
 assets/js/dashboard/stats/pages/index.js      | 23 +++---------
 .../dashboard/stats/sources/search-terms.tsx  |  4 ++-
 .../js/dashboard/stats/sources/source-list.js | 23 +++---------
 8 files changed, 21 insertions(+), 85 deletions(-)

diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 64ef1234896e..72111eeab9d1 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -8,10 +8,7 @@ import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
 import { conversionsRoute } from '../../router'
 
-export default function Conversions({
-  afterFetchData,
-  onGoalFilterClick
-}) {
+export default function Conversions({ afterFetchData, onGoalFilterClick }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index c741460bf11e..e83c7fb19a8b 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -99,10 +99,7 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
   )
 }
 
-export default function GoalConversions({
-  afterFetchData,
-  onGoalFilterClick
-}) {
+export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
   const { query } = useQueryContext()
 
   const specialGoal = getSpecialGoal(query)
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 136fb52b5bd9..d5e88f26350e 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -334,10 +334,7 @@ export default function Behaviours({ importedDataInView }) {
   function renderProps() {
     if (site.hasProps && site.propsAvailable) {
       return (
-        <Properties
-          propKey={selectedPropKey}
-          afterFetchData={afterFetchData}
-        />
+        <Properties propKey={selectedPropKey} afterFetchData={afterFetchData} />
       )
     } else if (adminAccess) {
       let callToAction
@@ -575,10 +572,7 @@ export default function Behaviours({ importedDataInView }) {
           {isRealtime() && <Pill className="-mt-1">last 30min</Pill>}
           {renderImportedQueryUnsupportedWarning()}
         </div>
-        <MoreLink
-          state={moreLinkState}
-          linkProps={moreLinkProps()}
-        />
+        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
       </ReportHeader>
       {renderContent()}
     </ReportLayout>
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 80ea815662e6..98b323392e7c 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -485,37 +485,17 @@ export default function Devices() {
     switch (mode) {
       case 'browser':
         if (isFilteringOnFixedValue(query, 'browser')) {
-          return (
-            <BrowserVersions
-              afterFetchData={afterFetchData}
-            />
-          )
+          return <BrowserVersions afterFetchData={afterFetchData} />
         }
-        return (
-          <Browsers
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <Browsers afterFetchData={afterFetchData} />
       case 'os':
         if (isFilteringOnFixedValue(query, 'os')) {
-          return (
-            <OperatingSystemVersions
-              afterFetchData={afterFetchData}
-            />
-          )
+          return <OperatingSystemVersions afterFetchData={afterFetchData} />
         }
-        return (
-          <OperatingSystems
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <OperatingSystems afterFetchData={afterFetchData} />
       case 'size':
       default:
-        return (
-          <ScreenSizes
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <ScreenSizes afterFetchData={afterFetchData} />
     }
   }
 
@@ -543,10 +523,7 @@ export default function Devices() {
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <MoreLink
-          state={moreLinkState}
-          linkProps={moreLinkProps()}
-        />
+        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
       </ReportHeader>
       {renderContent()}
     </ReportLayout>
diff --git a/assets/js/dashboard/stats/more-link-state.js b/assets/js/dashboard/stats/more-link-state.js
index ca3885f8ce9b..45052d31d909 100644
--- a/assets/js/dashboard/stats/more-link-state.js
+++ b/assets/js/dashboard/stats/more-link-state.js
@@ -3,4 +3,3 @@ export const MoreLinkState = {
   LOADING: 'loading',
   READY: 'ready'
 }
-
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index 6f34bfbee9b5..3f9fd2e7bac6 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -211,24 +211,12 @@ export default function Pages() {
   function renderContent() {
     switch (mode) {
       case 'entry-pages':
-        return (
-          <EntryPages
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <EntryPages afterFetchData={afterFetchData} />
       case 'exit-pages':
-        return (
-          <ExitPages
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <ExitPages afterFetchData={afterFetchData} />
       case 'pages':
       default:
-        return (
-          <TopPages
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <TopPages afterFetchData={afterFetchData} />
     }
   }
 
@@ -261,10 +249,7 @@ export default function Pages() {
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <MoreLink
-          state={moreLinkState}
-          linkProps={moreLinkProps()}
-        />
+        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
       </ReportHeader>
       {renderContent()}
     </ReportLayout>
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index 9194053fe316..7cb15c2d5565 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -78,7 +78,9 @@ function ConfigureSearchTermsCTA({
 export function SearchTerms() {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const [moreLinkState, setMoreLinkState] = React.useState(MoreLinkState.LOADING)
+  const [moreLinkState, setMoreLinkState] = React.useState(
+    MoreLinkState.LOADING
+  )
 
   const [loading, setLoading] = React.useState(true)
   const [errorPayload, setErrorPayload] = React.useState<null | ErrorPayload>(
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 9ce67283ae43..44d3c9f2e85b 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -254,29 +254,17 @@ export default function SourceList() {
 
   function renderContent() {
     if (Object.keys(UTM_TAGS).includes(currentTab)) {
-      return (
-        <UTMSources
-          tab={currentTab}
-          afterFetchData={afterFetchData}
-        />
-      )
+      return <UTMSources tab={currentTab} afterFetchData={afterFetchData} />
     }
 
     switch (currentTab) {
       case 'channels':
         return (
-          <Channels
-            onClick={onChannelClick}
-            afterFetchData={afterFetchData}
-          />
+          <Channels onClick={onChannelClick} afterFetchData={afterFetchData} />
         )
       case 'all':
       default:
-        return (
-          <AllSources
-            afterFetchData={afterFetchData}
-          />
-        )
+        return <AllSources afterFetchData={afterFetchData} />
     }
   }
 
@@ -316,10 +304,7 @@ export default function SourceList() {
             skipImportedReason={skipImportedReason}
           />
         </div>
-        <MoreLink
-          state={moreLinkState}
-          linkProps={moreLinkProps()}
-        />
+        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
       </ReportHeader>
       {renderContent()}
     </ReportLayout>

From 2f0939545b0ed9fc548c5e23f202a924f5926a40 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 23 Dec 2025 19:17:27 +0000
Subject: [PATCH 18/23] Vertically center-align CTA notice

---
 assets/js/dashboard/components/notice.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/js/dashboard/components/notice.js b/assets/js/dashboard/components/notice.js
index c091b36c11fb..e3e3520d2f3a 100644
--- a/assets/js/dashboard/components/notice.js
+++ b/assets/js/dashboard/components/notice.js
@@ -70,13 +70,13 @@ export function FeatureSetupNotice({
   }
 
   return (
-    <div className="sm:mx-32 mt-6 mb-3">
-      <div className="py-3">
-        <div className="text-center text-pretty mt-2 text-gray-800 dark:text-gray-200 font-medium">
+    <div className="size-full flex items-center justify-center">
+      <div className="py-3 max-w-2xl">
+        <div className="text-center text-pretty mt-2 text-gray-800 dark:text-gray-200 font-medium text-pretty">
           {title}
         </div>
 
-        <div className="text-center text-pretty mt-4 font-small text-sm text-gray-500 dark:text-gray-200">
+        <div className="text-center text-pretty mt-4 font-small text-sm text-gray-500 dark:text-gray-200 text-pretty">
           {info}
         </div>
 

From 1c011fd8e4a3e63efff634ca5332c0a371703ed2 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Wed, 24 Dec 2025 12:03:20 +0100
Subject: [PATCH 19/23] Update
 assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx

Co-authored-by: Artur Pata <artur.pata@gmail.com>
---
 .../dashboard/nav-menu/segments/searchable-segments-section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
index 8d736addea16..28ec9439b847 100644
--- a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
+++ b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
@@ -90,7 +90,7 @@ export const SearchableSegmentsSection = ({
         )}
       </div>
 
-      <div className="max-h-[210px] overflow-y-auto">
+      <div className="max-h-[228px] overflow-y-auto">
         {showableData.map((segment) => {
           return (
             <Tooltip

From 92b76fddc92e6fafa0b89a3c539172093032ad2c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 24 Dec 2025 11:26:07 +0000
Subject: [PATCH 20/23] Fix tooltip z-index issue

---
 assets/css/modal.css                 | 2 +-
 assets/js/dashboard/util/tooltip.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/css/modal.css b/assets/css/modal.css
index 365c0f5a30f4..7fa04121b426 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -28,7 +28,7 @@
   position: fixed;
   inset: 0;
   background: rgb(0 0 0 / 60%);
-  z-index: 99;
+  z-index: 999;
   overflow: auto;
 }
 
diff --git a/assets/js/dashboard/util/tooltip.tsx b/assets/js/dashboard/util/tooltip.tsx
index fbce1a08133f..0ec0010427c6 100644
--- a/assets/js/dashboard/util/tooltip.tsx
+++ b/assets/js/dashboard/util/tooltip.tsx
@@ -91,7 +91,7 @@ function TooltipMessage({
       ref={setPopperElement}
       style={popperStyle}
       {...popperAttributes}
-      className="z-[999] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
+      className="z-[99] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
       role="tooltip"
     >
       {children}

From 644cd12ae597fa69a31927502159c2def974f11b Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Mon, 29 Dec 2025 14:57:05 +0000
Subject: [PATCH 21/23] get rid of onListUpdate

---
 assets/js/dashboard/stats/locations/index.js | 88 +++++++-------------
 assets/js/dashboard/stats/more-link.js       |  8 +-
 assets/js/dashboard/stats/reports/list.tsx   | 27 +-----
 3 files changed, 35 insertions(+), 88 deletions(-)

diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index 09161fda9fc0..ac4c8d5a9c1c 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -19,8 +19,9 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
-function Countries({ query, site, onClick, afterFetchData, onListUpdate }) {
+function Countries({ query, site, onClick, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/countries'), query, { limit: 9 })
   }
@@ -60,12 +61,11 @@ function Countries({ query, site, onClick, afterFetchData, onListUpdate }) {
       }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Regions({ query, site, onClick, afterFetchData, onListUpdate }) {
+function Regions({ query, site, onClick, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/regions'), query, { limit: 9 })
   }
@@ -102,12 +102,11 @@ function Regions({ query, site, onClick, afterFetchData, onListUpdate }) {
       detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Cities({ query, site, afterFetchData, onListUpdate }) {
+function Cities({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/cities'), query, { limit: 9 })
   }
@@ -143,7 +142,6 @@ function Cities({ query, site, afterFetchData, onListUpdate }) {
       detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -154,19 +152,13 @@ class Locations extends React.Component {
     this.onCountryFilter = this.onCountryFilter.bind(this)
     this.onRegionFilter = this.onRegionFilter.bind(this)
     this.afterFetchData = this.afterFetchData.bind(this)
-    this.onListUpdate = this.onListUpdate.bind(this)
-    this.onMapDataUpdate = this.onMapDataUpdate.bind(this)
     this.tabKey = `geoTab__${props.site.domain}`
     const storedTab = storage.getItem(this.tabKey)
     this.state = {
       mode: storedTab || 'map',
       loading: true,
       skipImportedReason: null,
-      listData: null,
-      linkProps: null,
-      listLoading: true,
-      mapData: null,
-      mapLoading: true
+      moreLinkState: MoreLinkState.LOADING
     }
   }
 
@@ -190,32 +182,17 @@ class Locations extends React.Component {
       this.props.query !== prevProps.query ||
       this.state.mode !== prevState.mode
     ) {
-      this.setState({ loading: true })
+      this.setState({ loading: true, moreLinkState: MoreLinkState.LOADING })
     }
   }
 
   setMode(mode) {
     return () => {
       storage.setItem(this.tabKey, mode)
-      this.setState({
-        mode,
-        listData: null,
-        linkProps: null,
-        listLoading: true,
-        mapData: null,
-        mapLoading: true
-      })
+      this.setState({ mode })
     }
   }
 
-  onListUpdate(list, linkProps, loading) {
-    this.setState({ listData: list, linkProps, listLoading: loading })
-  }
-
-  onMapDataUpdate(data, loading) {
-    this.setState({ mapData: data, mapLoading: loading })
-  }
-
   onCountryFilter(mode) {
     return () => {
       this.countriesRestoreMode = mode
@@ -228,8 +205,16 @@ class Locations extends React.Component {
   }
 
   afterFetchData(apiResponse) {
+    let newMoreLinkState
+
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      newMoreLinkState = MoreLinkState.READY
+    } else {
+      newMoreLinkState = MoreLinkState.HIDDEN
+    }
     this.setState({
       loading: false,
+      moreLinkState: newMoreLinkState,
       skipImportedReason: apiResponse.skip_imported_reason
     })
   }
@@ -242,7 +227,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'regions':
@@ -252,7 +236,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'countries':
@@ -262,7 +245,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'map':
@@ -271,38 +253,23 @@ class Locations extends React.Component {
           <CountriesMap
             onCountrySelect={this.onCountryFilter('map')}
             afterFetchData={this.afterFetchData}
-            onDataUpdate={this.onMapDataUpdate}
           />
         )
     }
   }
 
-  getMoreLink() {
-    if (this.state.mode === 'map') {
-      const data = this.state.mapData?.results ?? []
-      return (
-        <MoreLink
-          list={data}
-          linkProps={{
-            path: countriesRoute.path,
-            search: (search) => search
-          }}
-          loading={this.state.mapLoading}
-          className=""
-          onClick={undefined}
-        />
-      )
+  getMoreLinkProps() {
+    let path
+
+    if (this.state.mode === 'regions') {
+      path = regionsRoute.path
+    } else if (this.state.mode === 'cities') {
+      path = citiesRoute.path
     } else {
-      return (
-        <MoreLink
-          list={this.state.listData}
-          linkProps={this.state.linkProps}
-          loading={this.state.listLoading}
-          className=""
-          onClick={undefined}
-        />
-      )
+      path = countriesRoute.path
     }
+
+    return { path: path, search: (search) => search }
   }
 
   render() {
@@ -333,7 +300,10 @@ class Locations extends React.Component {
               skipImportedReason={this.state.skipImportedReason}
             />
           </div>
-          {this.getMoreLink()}
+          <MoreLink
+            linkProps={this.getMoreLinkProps()}
+            state={this.state.moreLinkState}
+          />
         </ReportHeader>
         {this.renderContent()}
       </ReportLayout>
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 51108b575a11..99da748ef8ed 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -20,7 +20,7 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({ linkProps, state, onClick = undefined }) {
+export default function MoreLink({ linkProps, state }) {
   const portalRef = useRef(null)
 
   useEffect(() => {
@@ -47,11 +47,7 @@ export default function MoreLink({ linkProps, state, onClick = undefined }) {
 
   return (
     <Tooltip info="View details" containerRef={portalRef}>
-      <AppNavigationLink
-        {...linkProps}
-        className={baseClassName}
-        onClick={onClick}
-      >
+      <AppNavigationLink {...linkProps} className={baseClassName}>
         {icon}
       </AppNavigationLink>
     </Tooltip>
diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index 2515cab32f7d..fdd35e33c7c6 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -87,9 +87,7 @@ export interface SharedReportProps<
   afterFetchNextPage?: (response: TResponse) => void
 }
 
-type ListReportProps<
-  TListItem extends Record<string, unknown> & { name: string }
-> = {
+type ListReportProps = {
   /** What each entry in the list represents (for UI only). */
   keyLabel: string
   metrics: Metric[]
@@ -100,12 +98,6 @@ type ListReportProps<
   onClick?: () => void
   /** Color of the comparison bars in light-mode. */
   color?: string
-  /** Callback that receives the list data, linkProps, and loading state whenever it updates. Used to render MoreLink in parent components. */
-  onListUpdate?: (
-    list: TListItem[] | null,
-    linkProps: AppNavigationLinkProps | undefined,
-    loading: boolean
-  ) => void
 }
 
 /**
@@ -128,10 +120,8 @@ export default function ListReport<
   getFilterInfo,
   renderIcon,
   getExternalLinkUrl,
-  fetchData,
-  onListUpdate
-}: Omit<SharedReportProps<TListItem>, 'afterFetchNextPage'> &
-  ListReportProps<TListItem>) {
+  fetchData
+}: Omit<SharedReportProps<TListItem>, 'afterFetchNextPage'> & ListReportProps) {
   const { query } = useQueryContext()
   const [state, setState] = useState<{
     loading: boolean
@@ -147,9 +137,6 @@ export default function ListReport<
   const getData = useCallback(() => {
     if (!isRealtime) {
       setState({ loading: true, list: null, meta: null })
-      if (onListUpdate) {
-        onListUpdate(null, detailsLinkProps, true)
-      }
     }
     fetchData().then((response) => {
       if (afterFetchData) {
@@ -157,12 +144,9 @@ export default function ListReport<
       }
 
       setState({ loading: false, list: response.results, meta: response.meta })
-      if (onListUpdate) {
-        onListUpdate(response.results, detailsLinkProps, false)
-      }
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyLabel, query, detailsLinkProps, onListUpdate])
+  }, [keyLabel, query, detailsLinkProps])
 
   const onVisible = () => {
     setVisible(true)
@@ -174,9 +158,6 @@ export default function ListReport<
       // loading state, even in realtime mode, because the metrics list will change. We can
       // only read the new metrics once the new list is loaded.
       setState({ loading: true, list: null, meta: null })
-      if (onListUpdate) {
-        onListUpdate(null, detailsLinkProps, true)
-      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalFilterApplied])

From 2c49d142a364691103f55b24c9aa334f5f0a4721 Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Mon, 29 Dec 2025 15:10:05 +0000
Subject: [PATCH 22/23] get rid of detailsLinkProps

---
 assets/js/dashboard/stats/behaviours/conversions.js  |  5 -----
 .../dashboard/stats/behaviours/goal-conversions.js   |  6 ------
 assets/js/dashboard/stats/behaviours/props.js        |  6 ------
 assets/js/dashboard/stats/locations/index.js         |  6 ------
 assets/js/dashboard/stats/pages/index.js             | 12 ------------
 assets/js/dashboard/stats/reports/list.tsx           |  6 +-----
 6 files changed, 1 insertion(+), 40 deletions(-)

diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 72111eeab9d1..128b72b10514 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -6,7 +6,6 @@ import * as metrics from '../reports/metrics'
 import ListReport from '../reports/list'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
-import { conversionsRoute } from '../../router'
 
 export default function Conversions({ afterFetchData, onGoalFilterClick }) {
   const site = useSiteContext()
@@ -50,10 +49,6 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       keyLabel="Goal"
       onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: conversionsRoute.path,
-        search: (search) => search
-      }}
       color="bg-red-50 group-hover/row:bg-red-100"
       colMinWidth={90}
     />
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index e83c7fb19a8b..64925b6f6b3c 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -11,7 +11,6 @@ import {
 } from '../../util/filters'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
-import { customPropsRoute } from '../../router'
 
 export const SPECIAL_GOALS = {
   404: { title: '404 Pages', prop: 'path' },
@@ -87,11 +86,6 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel={prop}
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: customPropsRoute.path,
-        params: { propKey: url.maybeEncodeRouteParam(prop) },
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrlFactory()}
       color="bg-red-50"
       colMinWidth={90}
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index 1243f08484de..2a453c654e56 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -6,7 +6,6 @@ import * as url from '../../util/url'
 import { EVENT_PROPS_PREFIX, hasConversionGoalFilter } from '../../util/filters'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
-import { customPropsRoute } from '../../router'
 
 export default function Properties({ propKey, afterFetchData }) {
   const { query } = useQueryContext()
@@ -47,11 +46,6 @@ export default function Properties({ propKey, afterFetchData }) {
         getFilterInfo={getFilterInfo}
         keyLabel={propKey}
         metrics={chooseMetrics()}
-        detailsLinkProps={{
-          path: customPropsRoute.path,
-          params: { propKey },
-          search: (search) => search
-        }}
         color="bg-red-50 group-hover/row:bg-red-100"
         colMinWidth={90}
       />
diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index ac4c8d5a9c1c..073b1518097f 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -55,10 +55,6 @@ function Countries({ query, site, onClick, afterFetchData }) {
       onClick={onClick}
       keyLabel="Country"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: countriesRoute.path,
-        search: (search) => search
-      }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -99,7 +95,6 @@ function Regions({ query, site, onClick, afterFetchData }) {
       onClick={onClick}
       keyLabel="Region"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -139,7 +134,6 @@ function Cities({ query, site, afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="City"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index 3f9fd2e7bac6..30650a2d511e 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -54,10 +54,6 @@ function EntryPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Entry page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: entryPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -102,10 +98,6 @@ function ExitPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Exit page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: exitPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -146,10 +138,6 @@ function TopPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: topPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index fdd35e33c7c6..79cf70cddba1 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback, ReactNode } from 'react'
-import { AppNavigationLinkProps } from '../../navigation/use-app-navigate'
 import FlipMove from 'react-flip-move'
 
 import FadeIn from '../../fade-in'
@@ -92,8 +91,6 @@ type ListReportProps = {
   keyLabel: string
   metrics: Metric[]
   colMinWidth?: number
-  /** Navigation props to be passed to "More" link, if any. */
-  detailsLinkProps?: AppNavigationLinkProps
   /** Function with additional action to be taken when a list entry is clicked. */
   onClick?: () => void
   /** Color of the comparison bars in light-mode. */
@@ -114,7 +111,6 @@ export default function ListReport<
   metrics,
   colMinWidth = COL_MIN_WIDTH,
   afterFetchData,
-  detailsLinkProps,
   onClick,
   color,
   getFilterInfo,
@@ -146,7 +142,7 @@ export default function ListReport<
       setState({ loading: false, list: response.results, meta: response.meta })
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyLabel, query, detailsLinkProps])
+  }, [keyLabel, query])
 
   const onVisible = () => {
     setVisible(true)

From 5eb3b6a70ece4f71d1c5400a1658a79c9dfb7b16 Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Mon, 29 Dec 2025 15:15:02 +0000
Subject: [PATCH 23/23] remove onDataUpdate from map.tsx as well

---
 assets/js/dashboard/stats/locations/map.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index d514f024c5d1..8a0a53668955 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -34,15 +34,10 @@ type WorldJsonCountryData = { properties: { name: string; a3: string } }
 
 const WorldMap = ({
   onCountrySelect,
-  afterFetchData,
-  onDataUpdate
+  afterFetchData
 }: {
   onCountrySelect: () => void
   afterFetchData: (response: unknown) => void
-  onDataUpdate?: (
-    data: { results: CountryData[] } | null,
-    loading: boolean
-  ) => void
 }) => {
   const navigate = useAppNavigate()
   const { mode } = useTheme()
@@ -91,10 +86,7 @@ const WorldMap = ({
     if (data) {
       afterFetchData(data)
     }
-    if (onDataUpdate) {
-      onDataUpdate(data ?? null, isFetching)
-    }
-  }, [afterFetchData, data, isFetching, onDataUpdate])
+  }, [afterFetchData, data, isFetching])
 
   const { maxValue, dataByCountryCode } = useMemo(() => {
     const dataByCountryCode: Map<string, CountryData> = new Map()