From 3b09758881b395d8a6c528535b815266dc1772c1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 12:44:32 +0100
Subject: [PATCH] fix: cap inline bar chart max width at 75%

Prevents the top item from spanning full width, making bars
read more clearly as proportional indicators.
---
 components/behavior/FrustrationByPageTable.tsx | 2 +-
 components/dashboard/Campaigns.tsx             | 2 +-
 components/dashboard/ContentStats.tsx          | 2 +-
 components/dashboard/Locations.tsx             | 2 +-
 components/dashboard/TechSpecs.tsx             | 2 +-
 components/dashboard/TopReferrers.tsx          | 2 +-
 components/journeys/TopPathsTable.tsx          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/behavior/FrustrationByPageTable.tsx b/components/behavior/FrustrationByPageTable.tsx
index d8e3515..fa1169b 100644
--- a/components/behavior/FrustrationByPageTable.tsx
+++ b/components/behavior/FrustrationByPageTable.tsx
@@ -60,7 +60,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
           {/* Rows */}
           <div className="space-y-0.5">
             {pages.map((page) => {
-              const barWidth = (page.total / maxTotal) * 100
+              const barWidth = (page.total / maxTotal) * 75
               return (
                 <div
                   key={page.page_path}
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 91e925e..771e58a 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -156,7 +156,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             <>
               {displayedData.map((item) => {
                 const maxVis = displayedData[0]?.visitors ?? 0
-                const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 100 : 0
+                const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 75 : 0
                 return (
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 4f37eaa..6436398 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -151,7 +151,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             <>
               {displayedData.map((page, idx) => {
                 const maxPv = displayedData[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={page.path}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index aad4c17..ddb9895 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -298,7 +298,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                   const filterValue = activeTab === 'countries' ? item.country : activeTab === 'regions' ? item.region : item.city
                   const canFilter = onFilter && dim && filterValue
                   const maxPv = displayedData[0]?.pageviews ?? 0
-                  const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
+                  const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
                   return (
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index f18920e..51f9ec8 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -183,7 +183,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                 const dim = TAB_TO_DIMENSION[activeTab]
                 const canFilter = onFilter && dim
                 const maxPv = displayedData[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={item.name}
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index d7b5330..1f87352 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -115,7 +115,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
             <>
               {displayedReferrers.map((ref) => {
                 const maxPv = displayedReferrers[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={ref.referrer}
diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index 50660bb..2f6b739 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -51,7 +51,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
       ) : hasData ? (
         <div className="space-y-0.5">
           {paths.map((path, i) => {
-            const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 100 : 0
+            const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 75 : 0
             const displaySeq = truncateSequence(path.page_sequence, 7)
 
             return (