fix realtime logs for mobile

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -9,6 +9,7 @@ import {
   useCountryNames,
   useLocale,
   useMessages,
+  useMobile,
   useNavigation,
   useTimezone,
   useWebsite,
@@ -40,6 +41,7 @@ export function RealtimeLog({ data }: { data: any }) {
   const { countryNames } = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
   const { updateParams } = useNavigation();
+  const { isPhone } = useMobile();
 
   const buttons = [
     {
@@ -123,12 +125,18 @@ export function RealtimeLog({ data }: { data: any }) {
     const row = logs[index];
     return (
       <Row alignItems="center" style={style} gap>
-        <Link href={updateParams({ session: row.sessionId })}>
-          <Avatar seed={row.sessionId} size={32} />
-        </Link>
-        <Row width="100px">{getTime(row)}</Row>
+        <Row minWidth="30px">
+          <Link href={updateParams({ session: row.sessionId })}>
+            <Avatar seed={row.sessionId} size={32} />
+          </Link>
+        </Row>
+        <Row minWidth="100px">
+          <Text wrap="nowrap">{getTime(row)}</Text>
+        </Row>
         <IconLabel icon={getIcon(row)}>
-          <Text>{getDetail(row)}</Text>
+          <Text style={{ maxWidth: isPhone ? '400px' : null }} truncate>
+            {getDetail(row)}
+          </Text>
         </IconLabel>
       </Row>
     );
@@ -168,10 +176,22 @@ export function RealtimeLog({ data }: { data: any }) {
   return (
     <Column gap>
       <Heading size="2">{formatMessage(labels.activity)}</Heading>
-      <Row alignItems="center" justifyContent="space-between">
-        <SearchField value={search} onSearch={setSearch} />
-        <FilterButtons items={buttons} value={filter} onChange={setFilter} />
-      </Row>
+      {isPhone ? (
+        <>
+          <Row>
+            <SearchField value={search} onSearch={setSearch} />
+          </Row>
+          <Row>
+            <FilterButtons items={buttons} value={filter} onChange={setFilter} />
+          </Row>
+        </>
+      ) : (
+        <Row alignItems="center" justifyContent="space-between">
+          <SearchField value={search} onSearch={setSearch} />
+          <FilterButtons items={buttons} value={filter} onChange={setFilter} />
+        </Row>
+      )}
+
       <Column>
         {logs?.length === 0 && <Empty />}
         {logs?.length > 0 && (

src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx

@@ -6,7 +6,7 @@ import { PageBody } from '@/components/common/PageBody';
 import { Panel } from '@/components/common/Panel';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useRealtimeQuery } from '@/components/hooks';
+import { useMobile, useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimePaths } from './RealtimePaths';
@@ -16,6 +16,7 @@ import { percentFilter } from '@/lib/filters';
 
 export function RealtimePage({ websiteId }: { websiteId: string }) {
   const { data, isLoading, error } = useRealtimeQuery(websiteId);
+  const { isMobile } = useMobile();
 
   if (isLoading || error) {
     return <PageBody isLoading={isLoading} error={error} />;
@@ -48,7 +49,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
         <Panel>
           <RealtimeCountries data={countries} />
         </Panel>
-        <Panel gridColumn="span 2" padding="0">
+        <Panel gridColumn={isMobile ? null : 'span 2'} padding="0">
           <WorldMap data={countries} />
         </Panel>
       </GridRow>

src/components/metrics/ListTable.tsx

@@ -57,7 +57,7 @@ export function ListTable({
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
         currency={currency}
-        isMobile={isPhone}
+        isPhone={isPhone}
       />
     );
   };
@@ -101,7 +101,7 @@ const AnimatedRow = ({
   animate,
   showPercentage = true,
   currency,
-  isMobile,
+  isPhone,
 }) => {
   const props = useSpring({
     width: percent,
@@ -120,7 +120,7 @@ const AnimatedRow = ({
       gap
     >
       <Row alignItems="center">
-        <Text truncate={true} style={{ maxWidth: isMobile ? '200px' : '400px' }}>
+        <Text truncate={true} style={{ maxWidth: isPhone ? '200px' : '400px' }}>
           {label}
         </Text>
       </Row>