From c63578b35b19b4fdca4a513bd28bd4e205a39008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Mon, 19 Jan 2026 22:04:57 +0100
Subject: [PATCH] fix: widgets

---
 ...izationId.$projectId.settings._tabs.widgets.tsx |  9 +++++++--
 apps/start/src/routes/widget/realtime.tsx          | 14 +++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.widgets.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.widgets.tsx
index becf57a9..f62ef880 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.widgets.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.settings._tabs.widgets.tsx
@@ -148,11 +148,15 @@ function RealtimeWidgetSection({
     countries: true,
     paths: false,
   };
-
   const [options, setOptions] = useState<IRealtimeWidgetOptions>(
     (widget?.options as IRealtimeWidgetOptions) || defaultOptions,
   );
 
+  // Create a checksum based on URL and current options to force iframe reload
+  const widgetChecksum = widgetUrl
+    ? btoa(JSON.stringify(Object.values(options)))
+    : null;
+
   // Update local options when widget data changes
   useEffect(() => {
     if (widget?.options) {
@@ -250,7 +254,8 @@ function RealtimeWidgetSection({
             <h3 className="text-sm font-medium">Preview</h3>
             <div className="border rounded-lg overflow-hidden">
               <iframe
-                src={widgetUrl!}
+                key={widgetChecksum}
+                src={`${widgetUrl}&checksum=${widgetChecksum}`}
                 width="100%"
                 height="600"
                 className="border-0"
diff --git a/apps/start/src/routes/widget/realtime.tsx b/apps/start/src/routes/widget/realtime.tsx
index f1044da4..a60a17a8 100644
--- a/apps/start/src/routes/widget/realtime.tsx
+++ b/apps/start/src/routes/widget/realtime.tsx
@@ -119,7 +119,7 @@ function RealtimeWidget({ shareId, data, limit, color }: RealtimeWidgetProps) {
   return (
     <div className="flex h-screen w-full flex-col bg-background text-foreground">
       {/* Header with live counter */}
-      <div className="border-b p-6 pb-3">
+      <div className="p-6 pb-3">
         <div className="flex items-center justify-between w-full h-4">
           <div className="flex items-center gap-3 w-full">
             <Ping />
@@ -171,10 +171,10 @@ function RealtimeWidget({ shareId, data, limit, color }: RealtimeWidgetProps) {
         </div>
       </div>
 
-      <div className="flex flex-1 flex-col gap-6 overflow-auto p-6 hide-scrollbar">
-        {/* Histogram */}
-        {/* Countries and Referrers */}
-        {(data.countries.length > 0 || data.referrers.length > 0) && (
+      {(data.countries.length > 0 ||
+        data.referrers.length > 0 ||
+        data.paths.length > 0) && (
+        <div className="flex flex-1 flex-col gap-6 overflow-auto p-6 hide-scrollbar border-t">
           <div className={cn('grid grid-cols-1 gap-6', grids)}>
             {/* Countries */}
             {data.countries.length > 0 && (
@@ -296,8 +296,8 @@ function RealtimeWidget({ shareId, data, limit, color }: RealtimeWidgetProps) {
               </div>
             )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }