From 9866fb8e92802713be4c605104cc5b08264c522e Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 18:39:33 -0500
Subject: [PATCH] Move discard button below held card on mobile portrait

Position the button centered beneath the held card instead of to the
right side. Reset writing-mode to horizontal and add width:auto.

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

diff --git a/client/app.js b/client/app.js
index f1414c0..eb31dd7 100644
--- a/client/app.js
+++ b/client/app.js
@@ -3558,11 +3558,21 @@ class GolfGame {
             this.heldCardFloating.style.fontSize = `${cardWidth * 0.35}px`;
         }
 
-        // Position discard button attached to right side of held card
-        const buttonLeft = cardLeft + cardWidth; // Right edge of card (no gap)
-        const buttonTop = cardTop + cardHeight * 0.3; // Vertically centered on card
-        this.discardBtn.style.left = `${buttonLeft}px`;
-        this.discardBtn.style.top = `${buttonTop}px`;
+        // Position discard button
+        if (isMobilePortrait) {
+            // Below the held card, centered
+            const btnRect = this.discardBtn.getBoundingClientRect();
+            const buttonLeft = cardLeft + (cardWidth - (btnRect.width || 70)) / 2;
+            const buttonTop = cardTop + cardHeight + 4;
+            this.discardBtn.style.left = `${buttonLeft}px`;
+            this.discardBtn.style.top = `${buttonTop}px`;
+        } else {
+            // Right side of held card (desktop)
+            const buttonLeft = cardLeft + cardWidth;
+            const buttonTop = cardTop + cardHeight * 0.3;
+            this.discardBtn.style.left = `${buttonLeft}px`;
+            this.discardBtn.style.top = `${buttonTop}px`;
+        }
 
         if (card.rank === '★') {
             this.heldCardFloating.classList.add('joker');
diff --git a/client/style.css b/client/style.css
index c70fc62..aea4dd3 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5191,7 +5191,8 @@ body.mobile-portrait #discard-btn {
     position: fixed;
     writing-mode: horizontal-tb;
     text-orientation: initial;
-    padding: 8px 16px;
+    width: auto;
+    padding: 6px 18px;
     font-size: 0.8rem;
     border-radius: 8px;
 }