Panels redesign.

src/components/metrics/MetricsTable.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
+import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@@ -7,8 +7,6 @@ import { percentFilter } from '@/lib/filters';
 import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
-import styles from './MetricsTable.module.css';
-import { Panel } from '@/components/layout/Panel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -85,20 +83,12 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <Panel>
+    <Column gap="3" justifyContent="space-between">
       {error && <ErrorMessage />}
-      <div className={styles.actions}>
-        {allowSearch && (
-          <SearchField
-            className={styles.search}
-            value={search}
-            onSearch={setSearch}
-            delay={300}
-            autoFocus={true}
-          />
-        )}
+      <Row alignItems="center" justifyContent="space-between">
+        {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
         {children}
-      </div>
+      </Row>
       {data && !error && (
         <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
       )}
@@ -113,6 +103,6 @@ export function MetricsTable({
           </LinkButton>
         )}
       </Row>
-    </Panel>
+    </Column>
   );
 }