bye

frontend/src/App.jsx

@@ -3937,6 +3937,23 @@ function teamsOf(match) {
     .filter(Boolean)
 }
 
+function byeAdvanceNames(match) {
+  return [match?.team_a_name, match?.team_b_name]
+    .map(displayTeamName)
+    .filter(Boolean)
+}
+
+function noOpponentTooltip(match, roundLabel) {
+  const names = byeAdvanceNames(match)
+  const teamText = names.length > 1
+    ? `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`
+    : names[0] || 'this team'
+  const opener = names.length > 1
+    ? 'One or more teams did not confirm in time'
+    : 'A team did not confirm in time'
+  return `${opener}, so Gaijin automatically advanced ${teamText} to ${roundLabel}.`
+}
+
 // Drag-anywhere pan surface. A tap still clicks; only motion past a small
 // threshold pans (and suppresses the click). Move/up live on the window so a fast
 // drag keeps panning even when the cursor leaves the canvas.
@@ -4061,7 +4078,13 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
       for (const match of side.columns[c].matches) {
         if (fed.has(match.match_id)) continue
         const box = boxOf(layoutKey(c, match))
-        if (box) byes.push({ x: box.left, y: box.mid })
+        if (box) {
+          byes.push({
+            x: box.left,
+            y: box.mid,
+            title: noOpponentTooltip(match, side.columns[c].label),
+          })
+        }
       }
     }
     setConnectors({ width: grid.scrollWidth, height: grid.scrollHeight, lines, byes })
@@ -4099,17 +4122,19 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
               )
             })}
             {connectors.byes.map((bye, index) => (
-              <g key={`bye-${index}`}>
+              <g className="bracket-bye-hover" key={`bye-${index}`}>
+                <title>{bye.title}</title>
+                <path className="bracket-bye-hit" d={`M ${bye.x} ${bye.y} h -18`} />
                 <path className="bracket-bye-stub" d={`M ${bye.x} ${bye.y} h -18`} />
                 <text className="bracket-bye-tag" textAnchor="end" x={bye.x - 24} y={bye.y + 3}>
-                  bye
+                  no opponent
                 </text>
               </g>
             ))}
           </svg>
           {side.columns.map((column, columnIndex) => (
             <div className="tournament-round-column" key={column.id}>
-              <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-text-muted">
+              <p className="mb-3 text-center text-xs font-semibold uppercase tracking-wide text-text-muted">
                 {column.label}
               </p>
               <div className="tournament-round-track" style={{ height: layout.height || undefined }}>

frontend/src/styles.css

@@ -937,6 +937,16 @@ h3 {
   stroke-dasharray: 3 4;
 }
 
+.bracket-bye-hover {
+  cursor: help;
+  pointer-events: all;
+}
+
+.bracket-bye-hit {
+  stroke: transparent;
+  stroke-width: 18px;
+}
+
 .bracket-bye-tag {
   fill: var(--color-text-muted);
   font-size: 9px;