fix: general ui fixes

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