Responsive styles for session page.

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  width: 200px;
   position: relative;
 }
 
@@ -22,11 +21,10 @@
 }
 
 .type {
-  font-size: 10px;
+  font-size: 11px;
-  text-transform: uppercase;
   padding: 0 6px;
   border-radius: 4px;
-  border: 1px solid var(--base300);
+  border: 1px solid var(--base400);
 }
 
 .name {

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx

@@ -1,8 +1,8 @@
 import { Loading, TextOverflow } from 'react-basics';
 import { useMessages, useSessionData } from 'components/hooks';
 import Empty from 'components/common/Empty';
-import styles from './SessionData.module.css';
 import { DATA_TYPES } from 'lib/constants';
+import styles from './SessionData.module.css';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css

@@ -1,6 +1,6 @@
 .page {
   display: grid;
-  grid-template-columns: 300px 1fr max-content;
+  grid-template-columns: max-content 1fr max-content;
   margin-bottom: 40px;
   position: relative;
 }
@@ -11,6 +11,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 20px;
+  width: 300px;
   padding-right: 20px;
   border-right: 1px solid var(--base300);
   position: relative;
@@ -25,6 +26,7 @@
 }
 
 .data {
+  width: 300px;
   border-left: 1px solid var(--base300);
   padding-left: 20px;
   position: relative;
@@ -40,5 +42,6 @@
   .sidebar,
   .data {
     border: 0;
+    width: auto;
   }
 }

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css

@@ -3,6 +3,10 @@
   gap: 10px;
 }
 
+.info dl {
+  width: 100%;
+}
+
 .info dt {
   color: var(--font-color200);
   font-weight: bold;

src/pages/api/websites/[websiteId]/sessions/[sessionId]/index.ts

@@ -33,7 +33,7 @@ export default async (
       return unauthorized(res);
     }
 
-    const data = await getWebsiteSession(websiteId, sessionId);
+    const data = await getWebsiteSession(sessionId);
 
     return ok(res, data);
   }

src/queries/analytics/sessions/getSessionData.ts

@@ -35,6 +35,7 @@ async function clickhouseQuery(websiteId: string, sessionId: string) {
     from session_data
     where website_id = {websiteId:UUID}
     and session_id = {sessionId:UUID}
+    order by data_key asc
     `,
     { websiteId, sessionId },
   );

src/queries/analytics/sessions/getWebsiteSession.ts

@@ -2,23 +2,22 @@ import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, PRISMA, CLICKHOUSE } from 'lib/db';
 
-export async function getWebsiteSession(...args: [websiteId: string, sessionId: string]) {
+export async function getWebsiteSession(...args: [sessionId: string]) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-async function relationalQuery(websiteId: string, sessionId: string) {
+async function relationalQuery(sessionId: string) {
   return prisma.client.session.findUnique({
     where: {
       id: sessionId,
-      websiteId,
     },
   });
 }
 
-async function clickhouseQuery(websiteId: string, sessionId: string) {
+async function clickhouseQuery(sessionId: string) {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
@@ -41,10 +40,9 @@ async function clickhouseQuery(websiteId: string, sessionId: string) {
       sumIf(1, event_type = 1) as views,
       sumIf(1, event_type = 2) as events
     from website_event
-    where website_id = {websiteId:UUID}
+    where session_id = {sessionId:UUID}
-    and session_id = {sessionId:UUID}
     group by session_id, website_id, hostname, browser, os, device, screen, language, country, subdivision1, city
     `,
-    { websiteId, sessionId },
+    { sessionId },
   ).then(result => result?.[0]);
 }