Fix preview tooltip content size in macromolecules mode

[Copilot]

Problem

When hovering over peptides in macromolecules flex layout mode, the preview tooltip displays molecules at a tiny size, making them nearly impossible to see.

Root Cause

The issue occurs in packages/ketcher-core/src/application/render/renderStruct.ts when rendering structures in polymer editor mode. The code calculates SVG dimensions based on the wrapper element's bounding client rect:

const wrapperElementBoundingRect = wrapperElement.getBoundingClientRect();
const svgSize = isStructureLessThanWrapper
  ? Math.min(
      structureRectangleSize,
      wrapperElementBoundingRect.width,
      wrapperElementBoundingRect.height,
    )
  : undefined;

if (window.isPolymerEditorTurnedOn) {
  extendedOptions.width = svgSize;
  extendedOptions.height = svgSize;
}

When the wrapper element hasn't been fully laid out yet or has very small initial dimensions (0x0 or 1x1 pixels), svgSize becomes tiny, causing the SVG to render at an unusable size.

Solution

Added a minimum threshold check (MIN_SVG_SIZE = 50) to prevent setting explicit dimensions when the calculated size is too small:

if (window.isPolymerEditorTurnedOn) {
  extendedOptions.fontsz = 30;
  extendedOptions.fontszsub = 20;
  const MIN_SVG_SIZE = 50;
  if (svgSize && svgSize >= MIN_SVG_SIZE) {
    extendedOptions.width = svgSize;
    extendedOptions.height = svgSize;
  }
}

When dimensions are not explicitly set, the renderer uses its default behavior ('100%' width/height with auto-scaling), which properly sizes the structure based on the wrapper element's actual dimensions once it's laid out.

Testing

• ✅ All 286 tests in ketcher-core pass
• ✅ All 101 tests in ketcher-react pass
• ✅ All 82 tests in ketcher-macromolecules pass
• ✅ Code builds successfully

Fixes #5573

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Preview tooltip content is tiny </issue_title>
<issue_description>Steps to Reproduce

1. Switch to Macromolecules mode using the switcher in the top right corner of the top panel:

2. Click on the “A” button in the top panel:

3. Select the third option "Switch to flex layout mode":

4. Click on Folder icon "Open...":

5.Click on the first option "PASTE FROM CLIPBOARD":

6. Click on "Ket" at the left bottom area of "Open Structure" modal window:

7. Select "HELM" option in dropdown:

8. Copy this exact HELM string and click "add to canvas" :
   PEPTIDE1{[OMe-].[am]}|PEPTIDE2{[-Me]}|PEPTIDE3{[-Et]}|PEPTIDE4{[Me-].[-Me]}|PEPTIDE5{[MsO].[NHEt]}|PEPTIDE6{[ac].[-OMe]}|PEPTIDE7{[OtBu]}|PEPTIDE8{[Et-].[Azi].[Aib].[Aib-ol]}$$$$V2.0

9. Hover mouse any peptide and wait for preview tooltip

Actual behavior
Molecule on preview tooltip is tiny

Expected behavior
Molecule on preview tooltip is normal size

</issue_description>

Comments on the Issue (you are @copilot in this section)

@iRadionova Reproduced:

</comment_new>
<comment_new>@SefaBilgii
Reproduced with CHATGPT 5 and you can find link below genarated by chatgpt5 :

https://chatgpt.com/share/68b82baa-2290-800d-99dd-41114b9a0054

OS: Mac OS 15.6 (24G84)

@SefaBilgii Reproduced with chatgpt with 16 minutes which is 4 minutes before

ChatGPT Link: https://chatgpt.com/share/68c7d528-ae18-800d-b469-46f5a1ca1737

</comment_new>

Fixes #7728

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.