From 3a5244fbaed875ed190e4a705a1de31fde6e796d Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Wed, 13 May 2026 18:32:55 -0400
Subject: [PATCH] Bug fix bf-1unj: Fix match card participant names cut off on
 mobile

- Change .match-participants to column layout on mobile for better width distribution
- Allow .participant elements to shrink (flex-shrink: 1)
- Remove max-width constraint from .participant-name
- Ensures participant names, scores, and Winner badge are all visible

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/styles/mobile.css | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/web/src/styles/mobile.css b/web/src/styles/mobile.css
index fdab00e..0972858 100644
--- a/web/src/styles/mobile.css
+++ b/web/src/styles/mobile.css
@@ -391,7 +391,30 @@
   }
 
   .match-participants {
-    gap: var(--space-sm);
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+
+  .participant {
+    flex-shrink: 1;
+    min-width: 0;
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+  .participant-name {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .participant-score {
+    flex-shrink: 0;
+  }
+
+  .winner-badge {
+    flex-shrink: 0;
   }
 
   .match-footer {