Better printing for brackets

app/views/tournaments/_bracket_partial.html.erb

@@ -1,18 +1,26 @@
 <style>
 table.smallText tr td { font-size: 10px; }
+table.smallText {
+  border-collapse: collapse;
+}
+table.smallText th,
+table.smallText td {
+  border: 1px solid #000;
+}
 /*
  *  Bracket Layout Specifics
 */
 .bracket {
   display: flex;
-  font-size: 10px;
+  font-size: 10.5px;
+  gap: 2px;
 }
 .game {
   min-width: 150px;
-  min-height: 50px;
+  min-height: 58px;
   /*background-color: #ddd;*/
-  border: 1px solid #000; /* Dark border so boxes stay visible when printed */
-  margin: 5px;
+  border: 1.5px solid #000; /* Dark border so boxes stay visible when printed */
+  margin: 4px;
 }
 
 /*.game:after {
@@ -56,14 +64,15 @@ table.smallText tr td { font-size: 10px; }
 }
 
 .game-top {
-  border-bottom:1px solid #000;
-  padding: 2px;
-  min-height: 12px;
+  border-bottom:1.5px solid #000;
+  padding: 3px 4px;
+  min-height: 16px;
 }
 
 .bout-number {
   text-align: center;
-  /*padding-top: 15px;*/
+  line-height: 1.35;
+  padding: 1px 2px;
 }
 
 /* Style links within bout-number like default links */
@@ -77,15 +86,29 @@ table.smallText tr td { font-size: 10px; }
 }
 
 .bracket-winner {
-  border-bottom:1px solid #000;
-  padding: 2px;
-  min-height: 12px;
+  border-bottom:1.5px solid #000;
+  padding: 3px 4px;
+  min-height: 16px;
 }
 
 .game-bottom {
-  border-top:1px solid #000;
-  padding: 2px;
-  min-height: 12px;
+  border-top:1.5px solid #000;
+  padding: 3px 4px;
+  min-height: 16px;
+}
+
+@media print {
+  .game,
+  .game-top,
+  .game-bottom,
+  .bracket-winner,
+  table.smallText,
+  table.smallText th,
+  table.smallText td {
+    border-color: #000 !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }
 </style>
 <% if @tournament.tournament_type == "Pool to bracket" %>

app/views/tournaments/all_brackets.html.erb

@@ -1,20 +1,20 @@
 <style>
   /* General styles for pages */
   @page {
-    margin: 0.5in; /* Universal margin for all pages */
+    margin: 0.35in;
   }
 
   .page {
-    width: 7.5in; /* Portrait width (8.5in - margins) */
-    height: 10in; /* Portrait height (11in - margins) */
+    width: 7.8in; /* 8.5in - 2 * 0.35in */
+    height: 10.3in; /* 11in - 2 * 0.35in */
     margin: auto;
     overflow: hidden;
     position: relative;
   }
 
   .page-landscape {
-    width: 10in; /* Landscape width (11in - margins) */
-    height: 7.5in; /* Landscape height (8.5in - margins) */
+    width: 10.3in; /* 11in - 2 * 0.35in */
+    height: 7.8in; /* 8.5in - 2 * 0.35in */
     margin: auto;
     overflow: hidden;
     position: relative;
@@ -26,6 +26,11 @@
     transform-origin: top left;
   }
 
+  .bracket-container h4 {
+    margin-top: 0.15rem;
+    margin-bottom: 0.45rem;
+  }
+
   /* Print-specific styles */
   @media print {
     /* Set orientation for portrait pages */
@@ -51,6 +56,10 @@
       transform-origin: top left;
     }
 
+    .bracket {
+      page-break-inside: avoid;
+    }
+
     /* Optional: Hide elements not needed in print */
     .no-print {
       display: none;
@@ -62,15 +71,10 @@
   function scaleContent() {
     document.querySelectorAll('.page, .page-landscape').forEach(page => {
       const container = page.querySelector('.bracket-container');
-      const isLandscape = page.classList.contains('page-landscape');
 
-      // Page dimensions (1 inch = 96px)
-      const pageWidth = isLandscape ? 10 * 96 : 7.5 * 96;
-      const pageHeight = isLandscape ? 7.5 * 96 : 10 * 96;
-
-      // Subtract margins (0.5 inch margin)
-      const availableWidth = pageWidth - (0.5 * 96 * 2);
-      const availableHeight = pageHeight - (0.5 * 96 * 2);
+      // Use the actual page box size (already accounts for @page margins)
+      const availableWidth = page.clientWidth;
+      const availableHeight = page.clientHeight;
 
       // Measure content dimensions
       const contentWidth = container.scrollWidth;
@@ -80,8 +84,8 @@
       const scaleX = availableWidth / contentWidth;
       const scaleY = availableHeight / contentHeight;
 
-      // Use a slightly relaxed scaling to avoid over-aggressive shrinking
-      const scale = Math.min(scaleX, scaleY, 1); // Ensure scale does not exceed 100% (1)
+      // Keep a tiny buffer so borders/text don't clip at print edges
+      const scale = Math.min(scaleX, scaleY, 1) * 0.99;
 
       // Apply the scale
       container.style.transform = `scale(${scale})`;
@@ -91,9 +95,9 @@
       const scaledWidth = contentWidth * scale;
       const scaledHeight = contentHeight * scale;
 
-      // Center the content within the page
-      const horizontalPadding = (pageWidth - scaledWidth) / 2;
-      const verticalPadding = (pageHeight - scaledHeight) / 2;
+      // Center the content within the available page box
+      const horizontalPadding = (availableWidth - scaledWidth) / 2;
+      const verticalPadding = (availableHeight - scaledHeight) / 2;
 
       // Apply margin adjustments
       container.style.marginLeft = `${Math.max(0, horizontalPadding)}px`;