website refactor

apps/website/components/profile/SponsorshipRequestsPanel.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
+import { Card , Card as Surface } from '@/ui/Card';
 import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/Surface';
 import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import { ProfileSection } from './ProfileSection';
 
@@ -61,7 +59,7 @@ export function SponsorshipRequestsPanel({
                     borderColor="#23272B"
                   >
                     <Stack direction="row" align="center" justify="between" wrap gap={4}>
-                      <Box flexGrow={1} minWidth="0">
+                      <Stack flexGrow={1} minWidth="0">
                         <Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
                         {request.message && (
                           <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
@@ -69,7 +67,7 @@ export function SponsorshipRequestsPanel({
                         <Text size="xs" color="text-gray-500" block mt={2}>
                           {DateDisplay.formatShort(request.createdAtIso)}
                         </Text>
-                      </Box>
+                      </Stack>
                       <Stack direction="row" gap={2}>
                         <Button
                           variant="primary"