From e07fd3f0e82fe0b83d9893fb2bd84c6b9a052861 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 10 Mar 2026 01:13:03 +0100
Subject: [PATCH] Move expand icon to top-right corner of panels, make it
 larger

Reposition FrameCornersIcon from next to the title to the far right
of each card header (after tabs). Increase size from w-3.5 to w-4
and add hover background for better visibility and discoverability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/dashboard/Campaigns.tsx    | 22 +++++++++---------
 components/dashboard/ContentStats.tsx | 28 +++++++++++------------
 components/dashboard/Locations.tsx    | 32 +++++++++++++--------------
 components/dashboard/TechSpecs.tsx    | 32 +++++++++++++--------------
 components/dashboard/TopReferrers.tsx | 26 ++++++++++------------
 5 files changed, 69 insertions(+), 71 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 1134501..5d6165c 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -124,26 +124,26 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Campaigns
+          </h3>
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Campaigns
-            </h3>
+            <button
+              onClick={() => setIsBuilderOpen(true)}
+              className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
+          >
+              Build URL
+            </button>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1 text-neutral-300 dark:text-neutral-600 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all campaigns"
               >
-                <FrameCornersIcon className="w-3.5 h-3.5" weight="bold" />
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
               </button>
             )}
           </div>
-          <button
-            onClick={() => setIsBuilderOpen(true)}
-            className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
-          >
-            Build URL
-          </button>
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 09486e6..f70785d 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -98,21 +98,11 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Pages
+          </h3>
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Pages
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1 text-neutral-300 dark:text-neutral-600 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded"
-                aria-label="View all pages"
-              >
-                <FrameCornersIcon className="w-3.5 h-3.5" weight="bold" />
-              </button>
-            )}
-          </div>
-          <div className="flex gap-1" role="tablist" aria-label="Pages view tabs" onKeyDown={handleTabKeyDown}>
+            <div className="flex gap-1" role="tablist" aria-label="Pages view tabs" onKeyDown={handleTabKeyDown}>
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
                 key={tab}
@@ -135,6 +125,16 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                 )}
               </button>
             ))}
+            </div>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all pages"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
           </div>
         </div>
 
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 8cff2cb..d7025d7 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -202,22 +202,12 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Locations
+          </h3>
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Locations
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1 text-neutral-300 dark:text-neutral-600 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded"
-                aria-label="View all locations"
-              >
-                <FrameCornersIcon className="w-3.5 h-3.5" weight="bold" />
-              </button>
-            )}
-          </div>
-          <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
-            {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
+            <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
+              {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -238,7 +228,17 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                   />
                 )}
               </button>
-            ))}
+              ))}
+            </div>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all locations"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
           </div>
         </div>
 
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index caeb3ae..38573f9 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -128,22 +128,12 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Technology
+          </h3>
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Technology
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1 text-neutral-300 dark:text-neutral-600 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded"
-                aria-label="View all technology"
-              >
-                <FrameCornersIcon className="w-3.5 h-3.5" weight="bold" />
-              </button>
-            )}
-          </div>
-          <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
-            {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
+            <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
+              {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -164,7 +154,17 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                   />
                 )}
               </button>
-            ))}
+              ))}
+            </div>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all technology"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
           </div>
         </div>
 
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 14d50a3..7a2785c 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -86,20 +86,18 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Referrers
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1 text-neutral-300 dark:text-neutral-600 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded"
-                aria-label="View all referrers"
-              >
-                <FrameCornersIcon className="w-3.5 h-3.5" weight="bold" />
-              </button>
-            )}
-          </div>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Referrers
+          </h3>
+          {showViewAll && (
+            <button
+              onClick={() => setIsModalOpen(true)}
+              className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+              aria-label="View all referrers"
+            >
+              <FrameCornersIcon className="w-4 h-4" weight="bold" />
+            </button>
+          )}
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">