#7128 Molecular formula letters are not on the same level

[Copilot]

How the feature works? / How did you fix the issue?

Molecular formula elements displayed with misaligned baselines due to trailing whitespace after subscript tags.

Before:

<span>
  {element}
  <sub>{count}</sub>{' '}  // Trailing space breaks baseline
</span>

After:

// Remove trailing space from component
<span>
  {element}
  <sub>{count}</sub>
</span>

// Add spacing at render level with conditional logic
.map((atom, index, array) => (
  <span key={`${atom}-${index}`}>
    <GrossFormulaPart part={atom} />
    {index < array.length - 1 ? ' ' : ''}
  </span>
))

Also fixes React key collision when duplicate atoms appear in formula by using atom-index composite key.

Check list

• unit-tests written
• e2e-tests written
• documentation updated
• PR name follows the pattern #1234 – issue name
• branch name doesn't contain '#'
• PR is linked with the issue
• base branch (master or release/xx) is correct
• task status changed to "Code review"
• reviewers are notified about the pull request

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Molecular formula letters are not on the same level</issue_title>
<issue_description>Steps to Reproduce

1. Go to Macromolecules mode - Flex canvas (empty)
2. Load from HELM: CHEM1{[CC[Md]PCC]}$$$$V2.0
   
3. Open Calculate properties (press Alt+C)

Actual behavior
Molecular formula letters are not on the same level

Expected behavior
Molecular formula letters are on the same level

Environment details:

• Ketcher Version 3.4.0-rc.3 Build at 2025-05-15; 19:51:50
• Indigo Version 1.32.0-rc.2.0-g94ab270bd-wasm32-wasm-clang-19.0.0
• Chrome Version 136.0.7103.93 (Official Build) (64-bit)
• Win10

Found while testing: #5727</issue_description>

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

@SefaBilgii This issue is reproducible

Ketcher Version: 3.7.0-rc.1
OS: MacOs Sequoia Version 15.5
Browser : Chrome Version 138.0.7204.169
Indigo version 1.35.0-rc.1.0</comment_new>
<comment_new>@AlinaLysenko
Reproduced by agent - https://chatgpt.com/share/6930b0dd-c830-800e-8383-a671ca3e89cc</comment_new>

• Fixes Molecular formula letters are not on the same level #7128

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.