From c541ba56d45287eb0380581410ee6539f293aa2e Mon Sep 17 00:00:00 2001
From: Ryan Hamamura <58859899+ryanhamamura@users.noreply.github.com>
Date: Fri, 13 Feb 2026 12:26:24 -1000
Subject: [PATCH] fix: responsive C4 board on mobile and preserve chat input
 during morph

Shrink board cells to 36px with tighter gaps on <768px screens so the
board fits on 375px phones. Add DataIgnoreMorph to the C4 chat input
so typing isn't disrupted when new messages arrive.
---
 assets/css/input.css  |  3 +++
 assets/css/output.css | 12 ++++++++++++
 ui/c4chat.go          |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/css/input.css b/assets/css/input.css
index 121c533..0c453fe 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -166,6 +166,9 @@
   .c4-game-area { flex-direction: column; align-items: center; }
   .c4-game-area .c4-chat { width: 100%; max-width: 480px; }
   .c4-chat-history { height: 150px; }
+  .board { gap: 4px; padding: 8px; }
+  .column { gap: 4px; padding: 2px; }
+  .cell { width: 36px; height: 36px; }
 }
 
 /* C4 chat */
diff --git a/assets/css/output.css b/assets/css/output.css
index 0bdf756..ec5f46d 100644
--- a/assets/css/output.css
+++ b/assets/css/output.css
@@ -1723,6 +1723,18 @@
   .c4-chat-history {
     height: 150px;
   }
+  .board {
+    gap: 4px;
+    padding: 8px;
+  }
+  .column {
+    gap: 4px;
+    padding: 2px;
+  }
+  .cell {
+    width: 36px;
+    height: 36px;
+  }
 }
 .c4-chat {
   width: 100%;
diff --git a/ui/c4chat.go b/ui/c4chat.go
index 0e61671..a796085 100644
--- a/ui/c4chat.go
+++ b/ui/c4chat.go
@@ -50,7 +50,7 @@ func C4Chat(messages []C4ChatMessage, msgBind, sendClick, sendKeyDown h.H) h.H {
 
 	return h.Div(h.Class("c4-chat"),
 		h.Div(historyAttrs...),
-		h.Div(h.Class("c4-chat-input"),
+		h.Div(h.Class("c4-chat-input"), h.DataIgnoreMorph(),
 			h.Input(
 				h.Type("text"),
 				h.Attr("placeholder", "Chat..."),