From 09dc62dc96e630b54b19b5891e581417d7b707c8 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Wed, 24 Jun 2026 19:34:58 +0300 Subject: [PATCH] =?UTF-8?q?fix(lab-organic):=20=D0=BA=D0=BE=D0=BB=D0=B1?= =?UTF-8?q?=D1=8B=20=C2=AB=D0=9A=D0=B0=D1=87=D0=B5=D1=81=D1=82=D0=B2=D0=B5?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85=20=D1=80=D0=B5=D0=B0=D0=BA=D1=86=D0=B8?= =?UTF-8?q?=D0=B9=C2=BB=20=D1=83=D0=B5=D0=B7=D0=B6=D0=B0=D0=BB=D0=B8=20?= =?UTF-8?q?=D0=B7=D0=B0=20=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D1=8B=20?= =?UTF-8?q?=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Canvas был прямым flex-ребёнком (flex:1). _drawQual выставляет c.height = rect.height*dpr → intrinsic-высота канваса росла, а при min-height:auto flex-элемент не сжимался ниже неё → разгон высоты (×dpr на каждую перерисовку). Пробирки центрировались по H/2 и оказывались далеко ниже видимой области. Канвас обёрнут в position:relative;flex:1;overflow:hidden и сам стал position:absolute (как рабочий канвас конструктора молекул) — intrinsic-размер больше не влияет на раскладку. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/js/labs/organic.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/js/labs/organic.js b/frontend/js/labs/organic.js index 498d79b..dc23237 100644 --- a/frontend/js/labs/organic.js +++ b/frontend/js/labs/organic.js @@ -1252,10 +1252,16 @@ class OrganicSim { center.style.cssText = 'flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative'; panel.appendChild(center); + // wrapper makes the canvas position:absolute so its intrinsic pixel size + // (set in _drawQual) can't feed back into the flex layout and inflate height + const canvasWrap = document.createElement('div'); + canvasWrap.style.cssText = 'flex:1;position:relative;overflow:hidden'; + center.appendChild(canvasWrap); + const qualCanvas = document.createElement('canvas'); - qualCanvas.style.cssText = 'width:100%;flex:1;display:block'; + qualCanvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%'; this._qualCanvas = qualCanvas; - center.appendChild(qualCanvas); + canvasWrap.appendChild(qualCanvas); // compounds area const compArea = document.createElement('div');