On a phone a live stream is laid out the way Nostrich does it: the picture edge to edge, the chat a plain full-width list under it

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4

1 files changed, 7 insertions, 0 deletions

diff --git a/tools/live-stream-test.js b/tools/live-stream-test.js
index ef76043..2be6051 100644
--- a/tools/live-stream-test.js
+++ b/tools/live-stream-test.js
@@ -197,6 +197,12 @@ try {
   check('the host\'s face on their post wears the live ring', await waitFor((pk) => !!document.querySelector('.notes-feed .note-post .note-avatar.live-ring'), 5000));
   await page.evaluate(() => document.querySelector('.notes-feed .note-post .note-avatar.live-ring').click());
   check('...and a tap on it opens the stream', await waitFor(() => !!document.querySelector('.live-page'), 5000));
+  const lay = await page.evaluate(() => {
+    const r = (q) => document.querySelector(q)?.getBoundingClientRect();
+    const p = r('.live-page .live-player'), c = r('.live-page .live-chat');
+    return { w: document.body.clientWidth, player: p && [p.left, p.width], chat: c && [c.left, c.width] };
+  });
+  check('on a phone the picture runs edge to edge and the chat is as wide', lay.player && lay.player[0] === 0 && lay.player[1] === lay.w && lay.chat && lay.chat[0] === 0 && lay.chat[1] === lay.w, JSON.stringify(lay));
   await page.goBack();
   await waitFor(() => !document.querySelector('.live-page') && !!document.querySelector('.media-modes'), 5000);
   await page.evaluate(() => document.querySelector('.media-mode[data-mode="live"]').click());
@@ -217,6 +223,7 @@ try {
   check('...and the zap, its amount and words', await waitText('zapped 21 sats', 5000) && await waitText('great stream', 1000));
   const rowSel = '.live-message[data-key="' + chat.id + '"]';
   check('comments use the group-chat bubble and shared composer', await page.$(rowSel + ' .chat-bubble') && await page.$('.live-page coinos-text#msg-draft'));
+  check('...drawn plain on a phone, no bubble walls', await page.evaluate((q) => { const b = document.querySelector(q); return b && getComputedStyle(b).borderStyle === 'none' && getComputedStyle(b).display === 'block'; }, rowSel + ' .chat-bubble'));
   check('another client’s e-only reaction arrives on the comment', await waitFor(id => document.querySelector('.live-message[data-key="'+id+'"] .chat-reacts')?.textContent.includes('👍'), 6000, chat.id));
   check('per-comment zap receipts show under the bubble', await waitFor(id => document.querySelector('.live-message[data-key="'+id+'"] .zap-tally')?.textContent.includes('5'), 6000, chat.id));
   await page.click(rowSel + ' .chat-bubble');