diag(mobile): probe composer measurements + transition animation + tall-bubble content

tallImg was no-img, so the balloon is a TEXT bubble stretching (even in a 17-msg chat). Add: composer/
textarea height+scrollHeight+rows+value+fontSize+lineHeight (why ~4 lines), whether chat-opening class +
.content animationName are applied (why transition jumps), and the tall bubble's text + tallest child.
Build marker -> 2026-07-18-batch116.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-18 17:59:58 +05:30
parent 7f7ff8ba1f
commit 898d389dfe
+7 -3
View File
@@ -1126,7 +1126,7 @@
</head> </head>
<body> <body>
<script src="/icons.js?v=6"></script> <script src="/icons.js?v=6"></script>
<script>window.__BUILD='2026-07-18-batch115';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD); <script>window.__BUILD='2026-07-18-batch116';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);
// Emoji are rendered with the OS's own (colour) emoji font — instant, zero network. // Emoji are rendered with the OS's own (colour) emoji font — instant, zero network.
// //
// We used to run Twemoji over every emoji, which swapped each one for an <img> pulled INDIVIDUALLY from // We used to run Twemoji over every emoji, which swapped each one for an <img> pulled INDIVIDUALLY from
@@ -2867,8 +2867,12 @@ async function openConvo(kind,id){
[0,120,320,600,1000,1600,2400,3400].forEach((d)=>setTimeout(_pinNewest, d)); [0,120,320,600,1000,1600,2400,3400].forEach((d)=>setTimeout(_pinNewest, d));
const _pinBox=document.getElementById('msgs'); if(_pinBox){ _pinBox.querySelectorAll('img').forEach((im)=>{ if(!im.complete) im.addEventListener('load', _pinNewest, {once:true}); }); } const _pinBox=document.getElementById('msgs'); if(_pinBox){ _pinBox.querySelectorAll('img').forEach((im)=>{ if(!im.complete) im.addEventListener('load', _pinNewest, {once:true}); }); }
setTimeout(()=>{ try{ const b=document.getElementById('msgs'); if(b && window.bzDbg){ let tall={h:0,c:''}; b.querySelectorAll('.bubble,img,.att-img').forEach(el=>{ const h=el.getBoundingClientRect().height; if(h>tall.h) tall={h:Math.round(h), c:(el.className||el.tagName||'').toString().slice(0,36)}; }); bzDbg('convoOpen',{count:THREAD.length, scrollTop:Math.round(b.scrollTop), scrollH:Math.round(b.scrollHeight), clientH:Math.round(b.clientHeight), atBottom:(b.scrollHeight-b.scrollTop-b.clientHeight)<8, newsep:!!b.querySelector('.new-sep'), tallH:tall.h, tallC:tall.c}); } }catch(_){} }, 3600); setTimeout(()=>{ try{ const b=document.getElementById('msgs'); if(b && window.bzDbg){ let tall={h:0,c:''}; b.querySelectorAll('.bubble,img,.att-img').forEach(el=>{ const h=el.getBoundingClientRect().height; if(h>tall.h) tall={h:Math.round(h), c:(el.className||el.tagName||'').toString().slice(0,36)}; }); bzDbg('convoOpen',{count:THREAD.length, scrollTop:Math.round(b.scrollTop), scrollH:Math.round(b.scrollHeight), clientH:Math.round(b.clientHeight), atBottom:(b.scrollHeight-b.scrollTop-b.clientHeight)<8, newsep:!!b.querySelector('.new-sep'), tallH:tall.h, tallC:tall.c}); } }catch(_){} }, 3600);
// Also watch for a transient scrollHeight balloon (the stretch/jump) and report what's tallest when it spikes. // Composer + transition diagnostics.
if(window.bzDbg){ let _spk=0; const _watch=setInterval(()=>{ const b=document.getElementById('msgs'); if(!(selected&&selected.kind===kind&&selected.id===id)||!b){ clearInterval(_watch); return; } const per=b.scrollHeight/Math.max(1,THREAD.length); if(per>200 && _spk<2){ _spk++; let tall={h:0}; b.querySelectorAll('.bubble').forEach(el=>{ const h=el.getBoundingClientRect().height; if(h>tall.h){ const im=el.querySelector('img'); tall={h:Math.round(h), c:(el.className||'').slice(0,24), img: im?((im.className||'')+' nat='+im.naturalWidth+'x'+im.naturalHeight+' rH='+Math.round(im.getBoundingClientRect().height)+' mh='+getComputedStyle(im).maxHeight):'no-img'}; } }); bzDbg('spike',{scrollH:Math.round(b.scrollHeight), per:Math.round(per), tallH:tall.h, tallC:tall.c, tallImg:tall.img}); } }, 200); setTimeout(()=>clearInterval(_watch), 6000); } setTimeout(()=>{ try{ if(!window.bzDbg) return; var comp=document.querySelector('.composer'); var ta=document.getElementById('msgInput'); var content=document.querySelector('.shell > .content'); var cs=content?getComputedStyle(content):{};
bzDbg('diag',{ compH: comp?Math.round(comp.getBoundingClientRect().height):-1, taH: ta?Math.round(ta.getBoundingClientRect().height):-1, taScrollH: ta?ta.scrollHeight:-1, taRows: ta?ta.rows:-1, taValLen: ta?(ta.value||'').length:-1, taNL: ta?(ta.value||'').split('\n').length:-1, taFs: ta?getComputedStyle(ta).fontSize:'', taLh: ta?getComputedStyle(ta).lineHeight:'', taInlineH: ta?(ta.style.height||''):'', chatOpening:document.body.classList.contains('chat-opening'), contentAnim: cs.animationName+' '+cs.animationDuration });
}catch(_){} }, 160);
// Watch for the transient scrollHeight balloon; report what's tallest AND its tallest child + text.
if(window.bzDbg){ let _spk=0; const _watch=setInterval(()=>{ const b=document.getElementById('msgs'); if(!(selected&&selected.kind===kind&&selected.id===id)||!b){ clearInterval(_watch); return; } const per=b.scrollHeight/Math.max(1,THREAD.length); if(per>200 && _spk<2){ _spk++; let tall={h:0}; b.querySelectorAll('.bubble').forEach(el=>{ const h=el.getBoundingClientRect().height; if(h>tall.h){ let tc={h:0,d:''}; el.querySelectorAll('*').forEach(ch=>{ const chh=ch.getBoundingClientRect().height; if(chh>tc.h) tc={h:Math.round(chh), d:ch.tagName+'.'+(ch.className||'').toString().slice(0,16)}; }); tall={h:Math.round(h), c:(el.className||'').slice(0,18), txt:(el.textContent||'').trim().slice(0,44), kids:el.childElementCount, tallKid:tc.d+'='+tc.h}; } }); bzDbg('spike',{scrollH:Math.round(b.scrollHeight), per:Math.round(per), tallH:tall.h, tallC:tall.c, txt:tall.txt, kids:tall.kids, tallKid:tall.tallKid}); } }, 200); setTimeout(()=>clearInterval(_watch), 6000); }
} }
// ---------- @mentions (group chat) ---------- // ---------- @mentions (group chat) ----------
let mentionItems=[], mentionIdx=0, mentionStart=-1; let mentionItems=[], mentionIdx=0, mentionStart=-1;