Grouped toolbar is inaccessible on small screens / Inline editor toolbar is lost on mobile and desktop

[jacekbogdanski]

📝 Provide detailed reproduction steps (if any)

1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html on some small iOS device (like iPhone 8 / 12 mini etc)
2. Play with floating toolbars.

✔️ Expected result

The floating toolbar opening direction depends on screen space and opens where it will be most visible.

❌ Actual result

A most left floating toolbar opens left and is mostly hidden.

📃 Other details

• Browser: iOS Safari
• OS: iOS 14.5

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mgsy]

This issue is reproducible also on desktop. It affects all narrow screens:

[nileshawtade]

Any update on this issue ?

[tony1377]

Any ETA on this issue?

[cmak9149]

Any update on this?

[pomek]

It can also be reproduced in a broader editor that touches the left edge of a browser.

[jjroelofs]

I've been breaking my head trying to build a workaround but there are always some edge cases or weird things happening, like the toolbar losing its box shadow, or fixed position not being fixed to the viewport without apparent reason.

Before situation

My best effort unreliable fix:

@media screen and (max-width: 1399px) {
  .ck.ck-balloon-panel {
    .ck.ck-toolbar {
      box-shadow: var(--ck-drop-shadow),0 0;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: calc(100vw - 4px) !important;
      top: auto !important;
      .ck.ck-toolbar {
        bottom: calc(var(--ck-ui-component-min-height) + 10px) !important;
      }
    }
  }
}

Result with weird unfixed fixed positioning:

[jjroelofs]

@Witoso How can I get in touch about paying a bounty to fix this bug. Before I take it to some freelancing platform I want to offer the bounty to your team. We're working on DXPR 3, the latest iteration of our Drupal based platform and we are committed to making it the most accessible, mobile-friendly, and globally inclusive web CMS platform. This issue is a decisive blocker for us and we need it fixed urgently.

If your team is not available for this job, it would be great to get your perspective on what the fix should look like. If you can point us to the right plugins/files that would also be wonderful.

[Witoso]

We are not doing sponsored development or bug bounties, but you can always reach out to our team. This issue is tricky for us to fix, and it's not a coincidence it's open for so long. As we have larger high-priority projects in progress, I cannot give an ETA for this issue. But I will ask some members to investigate the solution, and check if there's some low-hanging fruit there.

[jjroelofs]

Thx I reached out to the team, just in case you can pull up info on this issue it would be awesome if you could tell me what component to target with our engineering resources. Specifically the inline editor? Or does your team see the scope as some broader component family? Any details would be helpful, for us the ideal situation would be to see a solution merged here.