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;
-  text-transform: uppercase;
+  font-size: 11px;
   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;