fix: general ui fixes

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,

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="row gap-2 justify-between items-center">
-        <div className="relative mb-1 text-xs font-medium text-muted-foreground">
+        <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}

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">

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">

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}`}

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">

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">

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 { series } = useVisibleSeries(data, 99999);
-  const [filters, setFilter] = useEventQueryFilters();
+  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],

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,8 +180,7 @@ 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>
@@ -290,8 +297,7 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
             columns={1}
             data={data}
             renderValue={(item) => {
-                const isFilterable =
+              const isFilterable = item.value && (filterable as any)[item.name];
-                  item.value && (filterable as any)[item.name];
               if (isFilterable) {
                 return (
                   <div className="flex items-center gap-2">
@@ -306,16 +312,11 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
               }
 
               return (
-                  <FieldValue
+                <FieldValue name={item.name} value={item.value} event={event} />
-                    name={item.name}
-                    value={item.value}
-                    event={event}
-                  />
               );
             }}
             onItemClick={(item) => {
-                const isFilterable =
+              const isFilterable = item.value && (filterable as any)[item.name];
-                  item.value && (filterable as any)[item.name];
               if (isFilterable) {
                 popModal();
                 setFilter(item.name as keyof IServiceEvent, item.value);
@@ -355,15 +356,13 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
           </div>
         </section>
       </WidgetBody>
-      </Widget>
+    </>
-    </ModalContent>
   );
 }
 
 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" />
@@ -446,7 +445,6 @@ function EventDetailsSkeleton() {
           </div>
         </section>
       </WidgetBody>
-      </Widget>
+    </>
-    </ModalContent>
   );
 }

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>