fix: general ui fixes

2025-12-02 21:54:57 +01:00
parent 50ef4c0d94
commit e4b919c4da
10 changed files with 256 additions and 248 deletions
--- 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,
--- 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}
--- 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">
--- 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">
--- 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}`}
--- 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">
--- 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">
--- 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],
--- 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>
+    </>
  );
 }
--- 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>