preview bracket

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

@@ -20,7 +20,7 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, onAnnounce }) => {
   }, [bracket.winners, bracket.losers]);
 
   return <ScrollArea
-      h={`calc(${height} - 4rem)`}
+      h={`calc(${height})`}
       className="bracket-container"
       style={{
         backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,

src/features/bracket/components/preview.tsx

@@ -0,0 +1,14 @@
+import { useBracketPreview } from "../queries";
+import BracketView from "./bracket-view";
+
+interface BracketPreviewProps {
+  n: number;
+}
+
+const BracketPreview: React.FC<BracketPreviewProps> = ({ n }) => {
+  const { data: bracket } = useBracketPreview(n);
+
+  return <BracketView bracket={bracket} />
+};
+
+export default BracketPreview;