website refactor

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -4,6 +4,8 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Accordion } from '@/ui/Accordion';
 import { Copy } from 'lucide-react';
 import React, { useState } from 'react';
@@ -40,9 +42,9 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
   };
 
   return (
-    <div style={{ width: '100%', marginTop: '1.5rem', paddingTop: '1.5rem', borderTop: '1px solid var(--ui-color-border-muted)' }}>
+    <Box width="100%" marginTop={6} paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
       <Accordion title="Technical Logs">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Stack gap={4}>
           <Card variant="outline">
             <Text font="mono" size="xs" variant="low" block leading="relaxed" style={{ maxHeight: '12rem', overflow: 'auto' }}>
               {error.stack || 'No stack trace available'}
@@ -50,7 +52,7 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
             </Text>
           </Card>
           
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Box display="flex" justifyContent="end">
             <Button 
               variant="secondary" 
               size="sm"
@@ -59,9 +61,9 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
             >
               {copied ? 'Copied!' : 'Copy Details'}
             </Button>
-          </div>
-        </div>
+          </Box>
+        </Stack>
       </Accordion>
-    </div>
+    </Box>
   );
 }