From 2acfd90bbd75987d15893e485ce0c61f9f3e5920 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:01:24 +0100
Subject: [PATCH] style: move Campaigns to 2-col grid, show UTM details on
 second line

Pair Campaigns with Goals & Events in a half-width grid to avoid empty
space. Show medium and campaign on a visible second line under source
name instead of subtle inline text.
---
 app/sites/[id]/page.tsx            |  9 ++++----
 components/dashboard/Campaigns.tsx | 36 +++++++++++++++---------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 8644980..4c878d0 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -607,16 +607,15 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      {/* Campaigns Report */}
-      <div className="mb-8">
-        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
-      </div>
-
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
         <GoalStats
           goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}
           onSelectEvent={setSelectedEvent}
         />
+      </div>
+
+      <div className="mb-8">
         <ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} />
       </div>
 
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 33433a3..5ea0423 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -153,19 +153,19 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
-                    className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`flex items-center justify-between py-1.5 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
-                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                    <div className="flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
-                      <div className="truncate min-w-0">
-                        <span className="truncate font-medium" title={item.source}>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
-                        </span>
-                        {secondary && (
-                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
-                            {secondary}
-                          </span>
-                        )}
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+                          {item.medium && <span>{item.medium}</span>}
+                          {item.medium && item.campaign && <span>·</span>}
+                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-2 ml-4">
@@ -245,17 +245,17 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors"
                   >
-                    <div className="flex-1 truncate flex items-center gap-3 min-w-0">
+                    <div className="flex-1 flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
                       <div className="min-w-0">
-                        <span className="text-neutral-900 dark:text-white font-medium truncate" title={item.source}>
+                        <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
-                        </span>
-                        {secondary && (
-                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
-                            {secondary}
-                          </span>
-                        )}
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+                          {item.medium && <span>{item.medium}</span>}
+                          {item.medium && item.campaign && <span>·</span>}
+                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-4 ml-4 text-sm">