From e4b919c4dab3247465b5d29d2507a86d42a3438b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 2 Dec 2025 21:54:57 +0100
Subject: [PATCH] fix: general ui fixes

---
 .../src/components/events/table/columns.tsx   |   5 +-
 .../overview/overview-live-histogram.tsx      |   8 +-
 .../realtime/realtime-active-sessions.tsx     |   2 +-
 .../src/components/realtime/realtime-geo.tsx  |   4 +
 .../realtime/realtime-live-histogram.tsx      |   2 +-
 .../components/realtime/realtime-paths.tsx    |   4 +
 .../realtime/realtime-referrals.tsx           |   4 +
 .../src/components/report-chart/map/chart.tsx |   7 +-
 apps/start/src/modals/event-details.tsx       | 466 +++++++++---------
 ...pp.$organizationId.$projectId.realtime.tsx |   2 +-
 10 files changed, 256 insertions(+), 248 deletions(-)

diff --git a/apps/start/src/components/events/table/columns.tsx b/apps/start/src/components/events/table/columns.tsx
index f801d221..a8ab6ba0 100644
--- a/apps/start/src/components/events/table/columns.tsx
+++ b/apps/start/src/components/events/table/columns.tsx
@@ -3,7 +3,6 @@ import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
 import { useNumber } from '@/hooks/use-numer-formatter';
 import { pushModal } from '@/modals';
-import { formatDateTime, formatTimeAgoOrDateTime, timeAgo } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
 import type { ColumnDef } from '@tanstack/react-table';
 
@@ -28,7 +27,7 @@ export function useColumns() {
       accessorKey: 'name',
       header: 'Name',
       cell({ row }) {
-        const { name, path, duration } = row.original;
+        const { name, path, duration, properties } = row.original;
         const renderName = () => {
           if (name === 'screen_view') {
             if (path.includes('/')) {
@@ -209,7 +208,7 @@ export function useColumns() {
           ),
         );
         const items = Object.entries(filteredProperties);
-        const limit = 1;
+        const limit = 2;
         const data = items.slice(0, limit).map(([key, value]) => ({
           name: key,
           value: value,
diff --git a/apps/start/src/components/overview/overview-live-histogram.tsx b/apps/start/src/components/overview/overview-live-histogram.tsx
index f49aeede..5bc231d9 100644
--- a/apps/start/src/components/overview/overview-live-histogram.tsx
+++ b/apps/start/src/components/overview/overview-live-histogram.tsx
@@ -57,7 +57,7 @@ export function OverviewLiveHistogram({
     <Wrapper
       count={totalSessions}
       icons={
-        <div className="row gap-2">
+        <div className="row gap-2 shrink-0">
           {liveData.referrers.slice(0, 3).map((ref, index) => (
             <div
               key={`${ref.referrer}-${ref.count}-${index}`}
@@ -107,11 +107,11 @@ interface WrapperProps {
 function Wrapper({ children, count, icons }: WrapperProps) {
   return (
     <div className="flex h-full flex-col">
-      <div className="row gap-2 justify-between">
-        <div className="relative mb-1 text-xs font-medium text-muted-foreground">
+      <div className="row gap-2 justify-between items-center">
+        <div className="relative text-xs font-medium text-muted-foreground">
           {count} sessions last 30 min
         </div>
-        <div>{icons}</div>
+        {icons}
       </div>
       <div className="relative flex h-full w-full flex-1 items-end justify-center gap-2">
         {children}
diff --git a/apps/start/src/components/realtime/realtime-active-sessions.tsx b/apps/start/src/components/realtime/realtime-active-sessions.tsx
index 21e0f44c..3a6db1e9 100644
--- a/apps/start/src/components/realtime/realtime-active-sessions.tsx
+++ b/apps/start/src/components/realtime/realtime-active-sessions.tsx
@@ -53,7 +53,7 @@ export function RealtimeActiveSessions({
   const sessions = state.length > 0 ? state : (activeSessionsQuery.data ?? []);
 
   return (
-    <div className="col h-full">
+    <div className="col h-full max-md:hidden">
       <div className="hide-scrollbar h-full overflow-y-auto pb-10">
         <AnimatePresence mode="popLayout" initial={false}>
           <div className="col gap-4">
diff --git a/apps/start/src/components/realtime/realtime-geo.tsx b/apps/start/src/components/realtime/realtime-geo.tsx
index f10d485d..e09f1c85 100644
--- a/apps/start/src/components/realtime/realtime-geo.tsx
+++ b/apps/start/src/components/realtime/realtime-geo.tsx
@@ -51,6 +51,7 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
           {
             name: 'Country / City',
             width: 'w-full',
+            responsive: { priority: 1 },
             render(item) {
               return (
                 <Tooltiper
@@ -69,6 +70,7 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
           {
             name: 'Duration',
             width: '75px',
+            responsive: { priority: 7 },
             render(item) {
               return number.shortWithUnit(item.avg_duration, 'min');
             },
@@ -76,6 +78,7 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
           {
             name: 'Events',
             width: '60px',
+            responsive: { priority: 4 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
@@ -89,6 +92,7 @@ export function RealtimeGeo({ projectId }: RealtimeGeoProps) {
           {
             name: 'Sessions',
             width: '82px',
+            responsive: { priority: 2 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
diff --git a/apps/start/src/components/realtime/realtime-live-histogram.tsx b/apps/start/src/components/realtime/realtime-live-histogram.tsx
index a6c8fece..cd97312c 100644
--- a/apps/start/src/components/realtime/realtime-live-histogram.tsx
+++ b/apps/start/src/components/realtime/realtime-live-histogram.tsx
@@ -58,7 +58,7 @@ export function RealtimeLiveHistogram({
       count={totalVisitors}
       icons={
         liveData.referrers && liveData.referrers.length > 0 ? (
-          <div className="row gap-2">
+          <div className="row gap-2 shrink-0">
             {liveData.referrers.slice(0, 3).map((ref, index) => (
               <div
                 key={`${ref.referrer}-${ref.count}-${index}`}
diff --git a/apps/start/src/components/realtime/realtime-paths.tsx b/apps/start/src/components/realtime/realtime-paths.tsx
index 4046730a..60c9b396 100644
--- a/apps/start/src/components/realtime/realtime-paths.tsx
+++ b/apps/start/src/components/realtime/realtime-paths.tsx
@@ -48,6 +48,7 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
           {
             name: 'Path',
             width: 'w-full',
+            responsive: { priority: 1 },
             render(item) {
               return (
                 <Tooltiper
@@ -76,6 +77,7 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
           {
             name: 'Duration',
             width: '75px',
+            responsive: { priority: 7 },
             render(item) {
               return number.shortWithUnit(item.avg_duration, 'min');
             },
@@ -83,6 +85,7 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
           {
             name: 'Events',
             width: '60px',
+            responsive: { priority: 4 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
@@ -96,6 +99,7 @@ export function RealtimePaths({ projectId }: RealtimePathsProps) {
           {
             name: 'Sessions',
             width: '82px',
+            responsive: { priority: 2 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
diff --git a/apps/start/src/components/realtime/realtime-referrals.tsx b/apps/start/src/components/realtime/realtime-referrals.tsx
index 1c7e7e97..b3881f1b 100644
--- a/apps/start/src/components/realtime/realtime-referrals.tsx
+++ b/apps/start/src/components/realtime/realtime-referrals.tsx
@@ -45,6 +45,7 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
           {
             name: 'Referrer',
             width: 'w-full',
+            responsive: { priority: 1 },
             render(item) {
               return (
                 <Tooltiper asChild content={item.referrer_name} side="left">
@@ -59,6 +60,7 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
           {
             name: 'Duration',
             width: '75px',
+            responsive: { priority: 7 },
             render(item) {
               return number.shortWithUnit(item.avg_duration, 'min');
             },
@@ -66,6 +68,7 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
           {
             name: 'Events',
             width: '60px',
+            responsive: { priority: 4 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
@@ -79,6 +82,7 @@ export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
           {
             name: 'Sessions',
             width: '82px',
+            responsive: { priority: 2 },
             render(item) {
               return (
                 <div className="row gap-2 justify-end">
diff --git a/apps/start/src/components/report-chart/map/chart.tsx b/apps/start/src/components/report-chart/map/chart.tsx
index 18d3932f..d1eb8c69 100644
--- a/apps/start/src/components/report-chart/map/chart.tsx
+++ b/apps/start/src/components/report-chart/map/chart.tsx
@@ -15,13 +15,12 @@ export function Chart({ data }: Props) {
   const {
     report: { metric, unit },
   } = useReportChartContext();
-  const { series } = useVisibleSeries(data, 100);
-  const [filters, setFilter] = useEventQueryFilters();
-
+  const { series } = useVisibleSeries(data, 99999);
+  const [_, setFilter] = useEventQueryFilters();
   const mapData = useMemo(
     () =>
       series.map((s) => ({
-        country: s.names[0]?.toLowerCase() ?? '',
+        country: s.names[1]?.toLowerCase() ?? '',
         value: s.metrics[metric] ?? 0,
       })),
     [series, metric],
diff --git a/apps/start/src/modals/event-details.tsx b/apps/start/src/modals/event-details.tsx
index 83962221..1dbb3c05 100644
--- a/apps/start/src/modals/event-details.tsx
+++ b/apps/start/src/modals/event-details.tsx
@@ -18,10 +18,10 @@ import { useTRPC } from '@/integrations/trpc/react';
 import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
 import type { IClickhouseEvent, IServiceEvent } from '@openpanel/db';
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { FilterIcon, XIcon } from 'lucide-react';
 import { omit } from 'ramda';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { popModal } from '.';
 import { ModalContent } from './Modal/Container';
 
@@ -52,7 +52,19 @@ const filterable: Partial<Record<keyof IServiceEvent, keyof IClickhouseEvent>> =
     origin: 'origin',
   };
 
-export default function EventDetails({ id, createdAt, projectId }: Props) {
+export default function EventDetails(props: Props) {
+  return (
+    <ModalContent className="!p-0">
+      <Widget className="bg-transparent border-0 min-w-0">
+        <Suspense fallback={<EventDetailsSkeleton />}>
+          <EventDetailsContent {...props} />
+        </Suspense>
+      </Widget>
+    </ModalContent>
+  );
+}
+
+function EventDetailsContent({ id, createdAt, projectId }: Props) {
   const [, setEvents] = useEventQueryNamesFilter();
   const [, setFilter] = useEventQueryFilters();
   const TABS = {
@@ -67,7 +79,7 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
   };
   const [widget, setWidget] = useState(TABS.essentials);
   const trpc = useTRPC();
-  const query = useQuery(
+  const query = useSuspenseQuery(
     trpc.event.details.queryOptions({
       id,
       projectId,
@@ -75,10 +87,6 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
     }),
   );
 
-  if (!query.data) {
-    return <EventDetailsSkeleton />;
-  }
-
   const { event, session } = query.data;
 
   const profile = event.profile;
@@ -172,13 +180,12 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
     }));
 
   return (
-    <ModalContent className="!p-0">
-      <Widget className="bg-transparent border-0 min-w-0">
-        <WidgetHead>
-          <div className="row items-center justify-between">
-            <div className="title">{event.name}</div>
-            <div className="row items-center gap-2 pr-2">
-              {/* <Button
+    <>
+      <WidgetHead>
+        <div className="row items-center justify-between">
+          <div className="title">{event.name}</div>
+          <div className="row items-center gap-2 pr-2">
+            {/* <Button
                 size="icon"
                 variant={'ghost'}
                 onClick={() => {
@@ -202,251 +209,242 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
               >
                 <ArrowRightIcon className="size-4" />
               </Button> */}
-              <Button size="icon" variant={'ghost'} onClick={() => popModal()}>
-                <XIcon className="size-4" />
-              </Button>
-            </div>
+            <Button size="icon" variant={'ghost'} onClick={() => popModal()}>
+              <XIcon className="size-4" />
+            </Button>
           </div>
+        </div>
 
-          <WidgetButtons>
-            {Object.entries(TABS).map(([, tab]) => (
-              <button
-                key={tab.id}
-                type="button"
-                onClick={() => setWidget(tab)}
-                className={cn(tab.id === widget.id && 'active')}
-              >
-                {tab.title}
-              </button>
-            ))}
-          </WidgetButtons>
-        </WidgetHead>
-        <WidgetBody className="col gap-4 bg-def-100">
-          {profile && (
-            <ProjectLink
-              onClick={() => popModal()}
-              href={`/profiles/${profile.id}`}
-              className="card p-4 py-2 col gap-2 hover:bg-def-100"
+        <WidgetButtons>
+          {Object.entries(TABS).map(([, tab]) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setWidget(tab)}
+              className={cn(tab.id === widget.id && 'active')}
             >
-              <div className="row items-center gap-2 justify-between">
-                <div className="row items-center gap-2 min-w-0">
-                  {profile.avatar && (
-                    <img
-                      className="size-4 bg-border rounded-full"
-                      src={profile.avatar}
-                    />
-                  )}
-                  <div className="font-medium truncate">
-                    {getProfileName(profile, false)}
-                  </div>
-                </div>
-                <div className="row items-center gap-2 shrink-0">
-                  <div className="row gap-1 items-center">
-                    <SerieIcon name={event.country} />
-                    <SerieIcon name={event.os} />
-                    <SerieIcon name={event.browser} />
-                  </div>
-                  <div className="text-muted-foreground truncate max-w-40">
-                    {event.referrerName || event.referrer}
-                  </div>
-                </div>
-              </div>
-              {!!session && (
-                <div className="text-sm">
-                  This session has {session.screenViewCount} screen views and{' '}
-                  {session.eventCount} events. Visit duration is{' '}
-                  {fancyMinutes(session.duration / 1000)}.
-                </div>
-              )}
-            </ProjectLink>
-          )}
-
-          {properties.length > 0 && (
-            <section>
-              <div className="mb-2 flex justify-between font-medium">
-                <div>Properties</div>
-              </div>
-              <KeyValueGrid
-                columns={1}
-                data={properties}
-                renderValue={(item) => (
-                  <div className="flex items-center gap-2">
-                    <span className="font-mono">{String(item.value)}</span>
-                    <FilterIcon className="size-3 shrink-0" />
-                  </div>
+              {tab.title}
+            </button>
+          ))}
+        </WidgetButtons>
+      </WidgetHead>
+      <WidgetBody className="col gap-4 bg-def-100">
+        {profile && (
+          <ProjectLink
+            onClick={() => popModal()}
+            href={`/profiles/${profile.id}`}
+            className="card p-4 py-2 col gap-2 hover:bg-def-100"
+          >
+            <div className="row items-center gap-2 justify-between">
+              <div className="row items-center gap-2 min-w-0">
+                {profile.avatar && (
+                  <img
+                    className="size-4 bg-border rounded-full"
+                    src={profile.avatar}
+                  />
                 )}
-                onItemClick={(item) => {
-                  popModal();
-                  setFilter(`properties.${item.name}`, item.value as any);
-                }}
-              />
-            </section>
-          )}
+                <div className="font-medium truncate">
+                  {getProfileName(profile, false)}
+                </div>
+              </div>
+              <div className="row items-center gap-2 shrink-0">
+                <div className="row gap-1 items-center">
+                  <SerieIcon name={event.country} />
+                  <SerieIcon name={event.os} />
+                  <SerieIcon name={event.browser} />
+                </div>
+                <div className="text-muted-foreground truncate max-w-40">
+                  {event.referrerName || event.referrer}
+                </div>
+              </div>
+            </div>
+            {!!session && (
+              <div className="text-sm">
+                This session has {session.screenViewCount} screen views and{' '}
+                {session.eventCount} events. Visit duration is{' '}
+                {fancyMinutes(session.duration / 1000)}.
+              </div>
+            )}
+          </ProjectLink>
+        )}
+
+        {properties.length > 0 && (
           <section>
             <div className="mb-2 flex justify-between font-medium">
-              <div>Information</div>
+              <div>Properties</div>
             </div>
             <KeyValueGrid
               columns={1}
-              data={data}
-              renderValue={(item) => {
-                const isFilterable =
-                  item.value && (filterable as any)[item.name];
-                if (isFilterable) {
-                  return (
-                    <div className="flex items-center gap-2">
-                      <FieldValue
-                        name={item.name}
-                        value={item.value}
-                        event={event}
-                      />
-                      <FilterIcon className="size-3 shrink-0" />
-                    </div>
-                  );
-                }
-
-                return (
-                  <FieldValue
-                    name={item.name}
-                    value={item.value}
-                    event={event}
-                  />
-                );
-              }}
+              data={properties}
+              renderValue={(item) => (
+                <div className="flex items-center gap-2">
+                  <span className="font-mono">{String(item.value)}</span>
+                  <FilterIcon className="size-3 shrink-0" />
+                </div>
+              )}
               onItemClick={(item) => {
-                const isFilterable =
-                  item.value && (filterable as any)[item.name];
-                if (isFilterable) {
-                  popModal();
-                  setFilter(item.name as keyof IServiceEvent, item.value);
-                }
+                popModal();
+                setFilter(`properties.${item.name}`, item.value as any);
               }}
             />
           </section>
-          <section>
-            <div className="mb-2 flex justify-between font-medium">
-              <div>All events for {event.name}</div>
-              <button
-                type="button"
-                className="text-muted-foreground hover:underline"
-                onClick={() => {
-                  setEvents([event.name]);
-                  popModal();
-                }}
-              >
-                Show all
-              </button>
-            </div>
-            <div className="card p-4">
-              <ReportChartShortcut
-                projectId={event.projectId}
-                chartType="linear"
-                series={[
-                  {
-                    id: 'A',
-                    name: event.name,
-                    displayName: 'Similar events',
-                    segment: 'event',
-                    filters: [],
-                    type: 'event',
-                  },
-                ]}
-              />
-            </div>
-          </section>
-        </WidgetBody>
-      </Widget>
-    </ModalContent>
+        )}
+        <section>
+          <div className="mb-2 flex justify-between font-medium">
+            <div>Information</div>
+          </div>
+          <KeyValueGrid
+            columns={1}
+            data={data}
+            renderValue={(item) => {
+              const isFilterable = item.value && (filterable as any)[item.name];
+              if (isFilterable) {
+                return (
+                  <div className="flex items-center gap-2">
+                    <FieldValue
+                      name={item.name}
+                      value={item.value}
+                      event={event}
+                    />
+                    <FilterIcon className="size-3 shrink-0" />
+                  </div>
+                );
+              }
+
+              return (
+                <FieldValue name={item.name} value={item.value} event={event} />
+              );
+            }}
+            onItemClick={(item) => {
+              const isFilterable = item.value && (filterable as any)[item.name];
+              if (isFilterable) {
+                popModal();
+                setFilter(item.name as keyof IServiceEvent, item.value);
+              }
+            }}
+          />
+        </section>
+        <section>
+          <div className="mb-2 flex justify-between font-medium">
+            <div>All events for {event.name}</div>
+            <button
+              type="button"
+              className="text-muted-foreground hover:underline"
+              onClick={() => {
+                setEvents([event.name]);
+                popModal();
+              }}
+            >
+              Show all
+            </button>
+          </div>
+          <div className="card p-4">
+            <ReportChartShortcut
+              projectId={event.projectId}
+              chartType="linear"
+              series={[
+                {
+                  id: 'A',
+                  name: event.name,
+                  displayName: 'Similar events',
+                  segment: 'event',
+                  filters: [],
+                  type: 'event',
+                },
+              ]}
+            />
+          </div>
+        </section>
+      </WidgetBody>
+    </>
   );
 }
 
 function EventDetailsSkeleton() {
   return (
-    <ModalContent className="!p-0">
-      <Widget className="bg-transparent border-0 min-w-0">
-        <WidgetHead>
-          <div className="row items-center justify-between">
-            <div className="h-6 w-32 bg-muted animate-pulse rounded" />
-            <div className="row items-center gap-2 pr-2">
-              <div className="h-8 w-8 bg-muted animate-pulse rounded" />
-              <div className="h-8 w-8 bg-muted animate-pulse rounded" />
-              <div className="h-8 w-8 bg-muted animate-pulse rounded" />
+    <>
+      <WidgetHead>
+        <div className="row items-center justify-between">
+          <div className="h-6 w-32 bg-muted animate-pulse rounded" />
+          <div className="row items-center gap-2 pr-2">
+            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
+            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
+            <div className="h-8 w-8 bg-muted animate-pulse rounded" />
+          </div>
+        </div>
+
+        <WidgetButtons>
+          <div className="h-8 w-20 bg-muted animate-pulse rounded" />
+          <div className="h-8 w-20 bg-muted animate-pulse rounded" />
+        </WidgetButtons>
+      </WidgetHead>
+      <WidgetBody className="col gap-4 bg-def-100">
+        {/* Profile skeleton */}
+        <div className="card p-4 py-2 col gap-2">
+          <div className="row items-center gap-2 justify-between">
+            <div className="row items-center gap-2 min-w-0">
+              <div className="size-4 bg-muted animate-pulse rounded-full" />
+              <div className="h-4 w-24 bg-muted animate-pulse rounded" />
+            </div>
+            <div className="row items-center gap-2 shrink-0">
+              <div className="row gap-1 items-center">
+                <div className="size-4 bg-muted animate-pulse rounded" />
+                <div className="size-4 bg-muted animate-pulse rounded" />
+                <div className="size-4 bg-muted animate-pulse rounded" />
+              </div>
+              <div className="h-4 w-32 bg-muted animate-pulse rounded" />
             </div>
           </div>
+          <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+        </div>
 
-          <WidgetButtons>
-            <div className="h-8 w-20 bg-muted animate-pulse rounded" />
-            <div className="h-8 w-20 bg-muted animate-pulse rounded" />
-          </WidgetButtons>
-        </WidgetHead>
-        <WidgetBody className="col gap-4 bg-def-100">
-          {/* Profile skeleton */}
-          <div className="card p-4 py-2 col gap-2">
-            <div className="row items-center gap-2 justify-between">
-              <div className="row items-center gap-2 min-w-0">
-                <div className="size-4 bg-muted animate-pulse rounded-full" />
+        {/* Properties skeleton */}
+        <section>
+          <div className="mb-2 flex justify-between font-medium">
+            <div className="h-5 w-20 bg-muted animate-pulse rounded" />
+          </div>
+          <div className="space-y-2">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div
+                key={i.toString()}
+                className="flex items-center justify-between p-3 bg-muted/50 rounded"
+              >
                 <div className="h-4 w-24 bg-muted animate-pulse rounded" />
-              </div>
-              <div className="row items-center gap-2 shrink-0">
-                <div className="row gap-1 items-center">
-                  <div className="size-4 bg-muted animate-pulse rounded" />
-                  <div className="size-4 bg-muted animate-pulse rounded" />
-                  <div className="size-4 bg-muted animate-pulse rounded" />
-                </div>
                 <div className="h-4 w-32 bg-muted animate-pulse rounded" />
               </div>
-            </div>
-            <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+            ))}
           </div>
+        </section>
 
-          {/* Properties skeleton */}
-          <section>
-            <div className="mb-2 flex justify-between font-medium">
-              <div className="h-5 w-20 bg-muted animate-pulse rounded" />
-            </div>
-            <div className="space-y-2">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div
-                  key={i.toString()}
-                  className="flex items-center justify-between p-3 bg-muted/50 rounded"
-                >
-                  <div className="h-4 w-24 bg-muted animate-pulse rounded" />
-                  <div className="h-4 w-32 bg-muted animate-pulse rounded" />
-                </div>
-              ))}
-            </div>
-          </section>
+        {/* Information skeleton */}
+        <section>
+          <div className="mb-2 flex justify-between font-medium">
+            <div className="h-5 w-24 bg-muted animate-pulse rounded" />
+          </div>
+          <div className="space-y-2">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i.toString()}
+                className="flex items-center justify-between p-3 bg-muted/50 rounded"
+              >
+                <div className="h-4 w-20 bg-muted animate-pulse rounded" />
+                <div className="h-4 w-28 bg-muted animate-pulse rounded" />
+              </div>
+            ))}
+          </div>
+        </section>
 
-          {/* Information skeleton */}
-          <section>
-            <div className="mb-2 flex justify-between font-medium">
-              <div className="h-5 w-24 bg-muted animate-pulse rounded" />
-            </div>
-            <div className="space-y-2">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div
-                  key={i.toString()}
-                  className="flex items-center justify-between p-3 bg-muted/50 rounded"
-                >
-                  <div className="h-4 w-20 bg-muted animate-pulse rounded" />
-                  <div className="h-4 w-28 bg-muted animate-pulse rounded" />
-                </div>
-              ))}
-            </div>
-          </section>
-
-          {/* Chart skeleton */}
-          <section>
-            <div className="mb-2 flex justify-between font-medium">
-              <div className="h-5 w-40 bg-muted animate-pulse rounded" />
-              <div className="h-4 w-16 bg-muted animate-pulse rounded" />
-            </div>
-            <div className="card p-4">
-              <div className="h-32 w-full bg-muted animate-pulse rounded" />
-            </div>
-          </section>
-        </WidgetBody>
-      </Widget>
-    </ModalContent>
+        {/* Chart skeleton */}
+        <section>
+          <div className="mb-2 flex justify-between font-medium">
+            <div className="h-5 w-40 bg-muted animate-pulse rounded" />
+            <div className="h-4 w-16 bg-muted animate-pulse rounded" />
+          </div>
+          <div className="card p-4">
+            <div className="h-32 w-full bg-muted animate-pulse rounded" />
+          </div>
+        </section>
+      </WidgetBody>
+    </>
   );
 }
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx b/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
index 62bf3c62..fc7b2e8c 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
@@ -67,7 +67,7 @@ function Component() {
           </div>
         </div>
 
-        <div className="grid grid-cols-3 gap-4 p-8 pt-0">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4 pt-4 md:p-8 md:pt-0">
           <div>
             <RealtimeGeo projectId={projectId} />
           </div>