From b4e9390f161a25de8614d75b0f095fd325f2d31e Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 13:54:18 -0500
Subject: [PATCH] Show both KNOCKED and LOW SCORE badges when knocker wins hole

Also fix opponent areas shifting between rows on mobile by giving them
a fixed 120px width so name/score changes don't cause reflow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/app.js    | 3 ++-
 client/style.css | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/app.js b/client/app.js
index 4e22926..a2ccafa 100644
--- a/client/app.js
+++ b/client/app.js
@@ -1705,7 +1705,8 @@ class GolfGame {
 
             // Badge
             let badge = '';
-            if (isKnocker) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span>';
+            if (isKnocker && isLowScore) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span><span class="ss-badge ss-badge-low">LOW SCORE</span>';
+            else if (isKnocker) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span>';
             else if (isLowScore) badge = '<span class="ss-badge ss-badge-low">LOW SCORE</span>';
 
             // Build columns
diff --git a/client/style.css b/client/style.css
index da88ab4..eed6e12 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5061,6 +5061,8 @@ body.mobile-portrait .opponent-area {
     padding: 3px 4px 4px;
     border-radius: 6px;
     min-width: 0;
+    flex: 0 0 auto;
+    width: 120px;
     position: relative;
     overflow: visible;
 }
@@ -5078,9 +5080,10 @@ body.mobile-portrait .opponent-area h4 {
     font-size: 0.85rem;
     margin: 0 0 2px 0;
     padding: 2px 4px;
-    max-width: 120px;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    box-sizing: border-box;
 }
 
 body.mobile-portrait .opponent-area .card-grid {