fix: responsive C4 board on mobile and preserve chat input during morph
All checks were successful
Deploy c4 / deploy (push) Successful in 42s

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.
This commit is contained in:
Ryan Hamamura
2026-02-13 12:26:24 -10:00
parent 3593197271
commit c541ba56d4
3 changed files with 16 additions and 1 deletions

View File

@@ -166,6 +166,9 @@
.c4-game-area { flex-direction: column; align-items: center; } .c4-game-area { flex-direction: column; align-items: center; }
.c4-game-area .c4-chat { width: 100%; max-width: 480px; } .c4-game-area .c4-chat { width: 100%; max-width: 480px; }
.c4-chat-history { height: 150px; } .c4-chat-history { height: 150px; }
.board { gap: 4px; padding: 8px; }
.column { gap: 4px; padding: 2px; }
.cell { width: 36px; height: 36px; }
} }
/* C4 chat */ /* C4 chat */

View File

@@ -1723,6 +1723,18 @@
.c4-chat-history { .c4-chat-history {
height: 150px; height: 150px;
} }
.board {
gap: 4px;
padding: 8px;
}
.column {
gap: 4px;
padding: 2px;
}
.cell {
width: 36px;
height: 36px;
}
} }
.c4-chat { .c4-chat {
width: 100%; width: 100%;

View File

@@ -50,7 +50,7 @@ func C4Chat(messages []C4ChatMessage, msgBind, sendClick, sendKeyDown h.H) h.H {
return h.Div(h.Class("c4-chat"), return h.Div(h.Class("c4-chat"),
h.Div(historyAttrs...), h.Div(historyAttrs...),
h.Div(h.Class("c4-chat-input"), h.Div(h.Class("c4-chat-input"), h.DataIgnoreMorph(),
h.Input( h.Input(
h.Type("text"), h.Type("text"),
h.Attr("placeholder", "Chat..."), h.Attr("placeholder", "Chat..."),