Responsive updates.

src/components/common/GridRow.tsx

@@ -14,12 +14,11 @@ const LAYOUTS = {
       md: 'repeat(auto-fill, minmax(360px, 1fr))',
     },
   },
-  'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
-  'two-one': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },
+  'one-two': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
+  'two-one': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
 };
 
 export function GridRow(props: {
-  [x: string]: any;
   layout?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
   className?: string;
   children?: any;

src/components/common/PageBody.tsx

@@ -28,7 +28,14 @@ export function PageBody({
   }
 
   return (
-    <Column {...props} width="100%" paddingBottom="9" style={{ margin: '0 auto', maxWidth }}>
+    <Column
+      {...props}
+      width="100%"
+      paddingBottom="9"
+      maxWidth={maxWidth}
+      paddingX="4"
+      style={{ margin: '0 auto' }}
+    >
       {children}
     </Column>
   );

src/components/common/Panel.tsx

@@ -15,7 +15,6 @@ import { useMessages } from '@/components/hooks';
 export interface PanelProps extends ColumnProps {
   title?: string;
   allowFullscreen?: boolean;
-  noPadding?: boolean;
 }
 
 const fullscreenStyles = {
@@ -28,14 +27,7 @@ const fullscreenStyles = {
   zIndex: 9999,
 } as any;
 
-export function Panel({
-  title,
-  allowFullscreen,
-  noPadding,
-  style,
-  children,
-  ...props
-}: PanelProps) {
+export function Panel({ title, allowFullscreen, style, children, ...props }: PanelProps) {
   const { formatMessage, labels } = useMessages();
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -45,7 +37,7 @@ export function Panel({
 
   return (
     <Column
-      padding={!noPadding ? '6' : undefined}
+      padding={{ xs: '3', md: '6' }}
       border
       borderRadius="3"
       backgroundColor

src/components/metrics/MetricsBar.tsx

@@ -7,7 +7,7 @@ export interface MetricsBarProps extends GridProps {
 
 export function MetricsBar({ children, ...props }: MetricsBarProps) {
   return (
-    <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
+    <Grid columns="repeat(auto-fit, minmax(170px, 1fr))" gap {...props}>
       {children}
     </Grid>
   );

src/components/metrics/MetricsTable.tsx

@@ -1,11 +1,11 @@
+import { useEffect, useMemo } from 'react';
+import { Icon, Text, Row, Grid } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
 import { Maximize } from '@/components/icons';
 import { MetricLabel } from '@/components/metrics/MetricLabel';
 import { percentFilter } from '@/lib/filters';
-import { Icon, Row, Text } from '@umami/react-zen';
-import { useEffect, useMemo } from 'react';
 import { ListTable, ListTableProps } from './ListTable';
 
 export interface MetricsTableProps extends ListTableProps {
@@ -77,21 +77,19 @@ export function MetricsTable({
       error={error}
       minHeight="400px"
     >
-      <div style={{ display: 'grid', gridTemplateRows: '1fr auto', minHeight: '400px' }}>
-        <div>{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}</div>
-        <div>
-          {showMore && limit && (
-            <Row justifyContent="center" alignItems="flex-end">
-              <LinkButton href={updateParams({ view: type })} variant="quiet">
-                <Icon size="sm">
-                  <Maximize />
-                </Icon>
-                <Text>{formatMessage(labels.more)}</Text>
-              </LinkButton>
-            </Row>
-          )}
-        </div>
-      </div>
+      <Grid>
+        {data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}
+        {showMore && limit && (
+          <Row justifyContent="center" alignItems="flex-end">
+            <LinkButton href={updateParams({ view: type })} variant="quiet">
+              <Icon size="sm">
+                <Maximize />
+              </Icon>
+              <Text>{formatMessage(labels.more)}</Text>
+            </LinkButton>
+          </Row>
+        )}
+      </Grid>
     </LoadingPanel>
   );
 }