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';
@@ -37,7 +37,7 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnou
 
   return (
     <Flex direction='row' gap={24} justify='left' pos='relative' p='xl'>
-      {bracket.map((round, roundIndex) => (
+        {bracket.map((round, roundIndex) => (
         <Flex direction='column' key={roundIndex} gap={24} justify='space-around'>
           {round.map((match, matchIndex) => {
             if (!match) return null;