fix: widgets

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"

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">
+      {(data.countries.length > 0 ||
-        {/* Histogram */}
+        data.referrers.length > 0 ||
-        {/* Countries and Referrers */}
+        data.paths.length > 0) && (
-        {(data.countries.length > 0 || data.referrers.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>
   );
 }