From c3594d27ed13282668facd02ab606d58ff2dac2e Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Fri, 29 May 2026 22:42:00 -0400
Subject: [PATCH] =?UTF-8?q?my=5Fsea=5Fvisit:=20share=20the=20owner=20picke?=
 =?UTF-8?q?r=20styling=20(--duoUser=20felt=20+=20fill)=20when=20showing=20?=
 =?UTF-8?q?the=20draw=20=E2=80=94=20TDD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bud-sea (visitor) VIEW DRAW rendered the cross but kept data-phase=landing,
so it sat on the --priUser landing bg instead of the owner's --duoUser picker
felt, and its #id_my_sea_visit_draw wrapper wasn't a flex container so the
picker didn't fill/centre like the owner's.

DRY fix (no new visit-only styling):
- VIEW DRAW toggle now flips .my-sea-page data-phase landing<->picker, so the
  cross reuses the shared .my-sea-page[data-phase=picker] --duoUser felt rule.
- .my-sea-visit-draw is display:contents, so its .my-sea-picker child becomes a
  direct flex item of .my-sea-page and fills/centres via the existing
  .my-sea-picker sizing.

FT asserts the page flips to data-phase=picker on VIEW DRAW.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/functional_tests/test_game_my_sea.py       | 5 +++++
 src/static_src/scss/_card-deck.scss            | 2 +-
 src/static_src/scss/_gameboard.scss            | 9 +++++++++
 src/templates/apps/gameboard/my_sea_visit.html | 7 ++++++-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/functional_tests/test_game_my_sea.py b/src/functional_tests/test_game_my_sea.py
index d8d259f..8ced546 100644
--- a/src/functional_tests/test_game_my_sea.py
+++ b/src/functional_tests/test_game_my_sea.py
@@ -2143,6 +2143,11 @@ class MySeaVisitSpectatorCrossTest(FunctionalTest):
         self.assertTrue(self.browser.find_elements(By.ID, "id_sea_stage"))
         self.assertFalse(self.browser.find_elements(
             By.CSS_SELECTOR, ".my-sea-scroll"))
+        # The cross rides the owner's shared picker felt: the page flips to
+        # data-phase="picker" (--duoUser bg) while showing the draw, and the
+        # display:contents wrapper lets .my-sea-picker fill the page.
+        page = self.browser.find_element(By.CSS_SELECTOR, ".my-sea-page")
+        self.assertEqual(page.get_attribute("data-phase"), "picker")
 
 
 class MySeaVisitVoiceGuardTest(FunctionalTest):
diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss
index f2eff92..85fd280 100644
--- a/src/static_src/scss/_card-deck.scss
+++ b/src/static_src/scss/_card-deck.scss
@@ -867,7 +867,7 @@ html:has(.sig-backdrop) {
 // (Polish 2026-05-29 — may be reverted; revert = drop this rule + the
 // `--img-stroke-w` var + the base.html body class.)
 body.deck-family-english {
-    --img-stroke-w: 0.08rem;
+    --img-stroke-w: 0.125rem;
 }
 
 // ─── My Sign picker — sizing + state-gated reveal ────────────────────────────
diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss
index 65df302..d293d15 100644
--- a/src/static_src/scss/_gameboard.scss
+++ b/src/static_src/scss/_gameboard.scss
@@ -337,6 +337,15 @@ body.page-gameboard {
     min-height: 0;
 }
 
+// Spectator (bud-sea) draw wrapper — `display: contents` makes it layout-
+// transparent so its `.my-sea-picker` child becomes a direct flex item of
+// `.my-sea-page` and fills/centres EXACTLY like the owner's picker, with no
+// separate visit-only sizing rules (DRY). VIEW DRAW toggles its display + the
+// page's data-phase, so the cross rides the shared picker felt + layout.
+.my-sea-visit-draw {
+    display: contents;
+}
+
 .my-sea-picker {
     flex: 1;
     min-height: 0;
diff --git a/src/templates/apps/gameboard/my_sea_visit.html b/src/templates/apps/gameboard/my_sea_visit.html
index 0b8c70a..d131c35 100644
--- a/src/templates/apps/gameboard/my_sea_visit.html
+++ b/src/templates/apps/gameboard/my_sea_visit.html
@@ -135,7 +135,11 @@
     {% endif %}
     <script>
     (function () {
-        // VIEW DRAW toggles the read-only draw against the table hex.
+        // VIEW DRAW toggles the read-only draw against the table hex. The
+        // page's data-phase flips landing↔picker so the cross reuses the
+        // owner's `.my-sea-page[data-phase="picker"]` --duoUser felt bg (DRY —
+        // same rule the owner picker rides). The hex view stays "landing".
+        var page = document.querySelector('.my-sea-page');
         var viewBtn = document.getElementById('id_my_sea_view_draw_btn');
         var draw = document.getElementById('id_my_sea_visit_draw');
         var landing = document.querySelector('.my-sea-visit-landing');
@@ -144,6 +148,7 @@
                 var showing = draw.style.display !== 'none';
                 draw.style.display = showing ? 'none' : '';
                 if (landing) landing.style.display = showing ? '' : 'none';
+                if (page) page.setAttribute('data-phase', showing ? 'landing' : 'picker');
             });
         }
         // GATE VIEW → visitor gate.