dots behind bracket

src/features/bracket/components/bracket-page.tsx

@@ -143,6 +143,11 @@ export const PreviewBracketPage: React.FC = () => {
         <ScrollArea
           h={`calc(${height} - 4rem)`}
           className="bracket-container"
+          style={{
+            backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0 0, 8px 8px'
+          }}
         >
           <div>
             <Text fw={600} size="md" mb={16}>

src/features/bracket/components/bracket-view.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Card, Container, Flex, Text } from '@mantine/core';
+import { ActionIcon, Card, Flex, Text } from '@mantine/core';
 import { PlayIcon } from '@phosphor-icons/react';
 import React from 'react';
 import { BracketMaps } from '../utils/bracket-maps';