diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5d41b2c..0c2b351 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4263,7 +4263,7 @@ function TournamentDetailPage({ tournamentId, navigate }) {
           ) : null}
 
           {bracketSides.length ? (
-            <div className="space-y-6">
+            <div className="space-y-12">
               {hasStandings || listSides.length ? (
                 <h2 className="text-lg font-semibold">Playoffs</h2>
               ) : null}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 00d4897..7680f17 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -836,13 +836,14 @@ h3 {
    tactical grid that pans with the bracket (it lives on the scrolling content). */
 .bracket-viewport {
   position: relative;
-  width: 100vw;
-  margin-left: calc(50% - 50vw);
+  width: 85vw;
+  margin-left: calc(50% - 42.5vw);
   max-height: 78vh;
   overflow: auto;
   overscroll-behavior: contain;
   cursor: grab;
-  border-block: 1px solid var(--color-border);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
   background-color: color-mix(in srgb, var(--color-bg) 86%, #000);
 }