Updated events page.

src/components/common/DataTable.tsx

@@ -34,7 +34,7 @@ export function DataTable({
   const { page, pageSize, count, data } = result || {};
   const { query } = params || {};
   const hasData = Boolean(!isLoading && data?.length);
-  const noResults = Boolean(!isLoading && query && !hasData);
+  const noResults = Boolean(query && !hasData);
   const { router, renderUrl } = useNavigation();
 
   const handleSearch = (query: string) => {

src/components/hooks/queries/useWebsiteSessions.ts

@@ -15,6 +15,7 @@ export function useWebsiteSessions(websiteId: string, params?: { [key: string]:
         ...data,
         ...params,
         ...filters,
+        pageSize: 20,
       });
     },
   });

src/components/input/DateFilter.module.css

@@ -0,0 +1,3 @@
+.dropdown span {
+  white-space: nowrap;
+}

src/components/input/DateFilter.tsx

@@ -5,6 +5,8 @@ import DatePickerForm from 'components/metrics/DatePickerForm';
 import { useLocale, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { formatDate, parseDateValue } from 'lib/date';
+import styles from './DateFilter.module.css';
+import classNames from 'classnames';
 
 export interface DateFilterProps {
   value: string;
@@ -123,7 +125,7 @@ export function DateFilter({
   return (
     <>
       <Dropdown
-        className={className}
+        className={classNames(className, styles.dropdown)}
         items={options}
         renderValue={renderValue}
         value={value}

src/components/layout/Grid.module.css

@@ -27,6 +27,10 @@
   padding-inline-end: 0;
 }
 
+.col.one {
+  grid-column: span 6;
+}
+
 .col.two {
   grid-column: span 3;
 }

src/components/metrics/MetricsBar.module.css

@@ -2,6 +2,8 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
   gap: 20px;
+  width: 100%;
+  position: relative;
 }
 
 @media screen and (max-width: 768px) {