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

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 [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],