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