CKEditor 5 in CustomerTicketMessage überlappt Attachments auf mobilen Viewports

[CWL-Informatik]

Environment

• Server OS Distribution: Ubuntu 22.04 LTS
• OTOBO installation type: Docker (Compose, Container: otobo-web-1, otobo-daemon-1)
• Browser: Edge / Chrome aktuelle Version (Windows 11), Safari / Chrome auf iPhone und iPad
• OTOBO version: 11.0.14 (Image: rotheross/otobo:rel-11_0_14)

Expected behavior

Im Customer-Portal („Neues Ticket“ / CustomerTicketMessage) soll der CKEditor‑5‑Editor auf mobilen Viewports vollständig responsive sein und den nachfolgenden Bereich für Dateiupload/Attachments und den „Übermitteln“-Button nicht überlagern.
Auch beim Schreiben und Scrollen sollte der Editor die darunterliegenden Elemente nicht verdecken.

Actual behavior

Auf schmalen Viewports (Smartphone-Breite im Desktop-Browser sowie iPhone/iPad) überlappt der CKEditor‑5‑Editor beim Schreiben und Scrollen den darunterliegenden Bereich für Dateiupload/Attachments.
Die Toolbar verhält sich sticky, der Editorbereich wächst dynamisch, und der Upload-Block bleibt teilweise hinter dem Editor „versteckt“, bis man wieder nach oben scrollt.

How to reproduce

Steps to reproduce the behavior:

1. Im Customer-Portal anmelden.
2. „Neues Ticket“ öffnen (Action=CustomerTicketMessage).
3. Browserfenster auf Smartphone-Breite verkleinern oder die Seite auf einem iPhone/iPad im Hochformat öffnen.
4. In das Feld „Text *“ klicken, sodass der CKEditor‑5 aktiv wird, und etwas Text eingeben.
5. Nach unten scrollen, bis der Bereich „Klicken und Dateien auswählen oder hier ablegen“ und der „Übermitteln“-Button sichtbar sein sollten.
6. Beobachten, dass der Editor-/Toolbar-Bereich den Dateiupload-Bereich teilweise überdeckt.

Additional information

• Es handelt sich um die Standard-CustomerTicketMessage-Maske ohne eigene Template-Anpassungen; Änderungen wurden nur über zusätzliches Custom CSS und JavaScript im Customer-Skin vorgenommen.
• Das Verhalten ist sowohl in der mobilen Ansicht von Desktop-Browsern als auch auf echten iOS-Geräten (iPhone, iPad) identisch.
• Es wurden bereits Workarounds über Custom CSS (Mindesthöhe und Abstand zwischen Editor und Attachment-Bereich) und zusätzliches JavaScript zur Deaktivierung der StickyToolbar auf kleinen Viewports getestet.
  Diese verbessern das Layout im Ruhezustand, verhindern die Überlappung während des Tippens und Scrollens aber nicht vollständig.
• Eine Option, die StickyToolbar des CKEditor‑5 im Customer-Frontend auf kleinen Viewports zu deaktivieren oder das Layout entsprechend anzupassen, wäre hilfreich.

Screenshots

Screenshots der Ansicht vor, während und nach der Texteingabe bei Smartphone-Breite sowie des DOM (Editor-Container und Attachment-Container) sind angehängt.

[stefanhaerter]

Hi @CWL-Informatik,

thanks for your report.

However, I was not able to reproduce it on a clean, new installation. Tested with Firefox:

I also tried to reproduce it with Chromium, but without success:

Because I'm not able to reproduce the issue, I will close it. However, if there is any additional detail or information that could help to reproduce the issue, please feel free to reopen it.

If the problem is or might probably be rooted in the custom CSS which you mentioned, I suggest you either post to our forum or reach out to hello@otobo.io for professional support.

Kind regards,
Stefan

P.S.:

Screenshots der Ansicht vor, während und nach der Texteingabe bei Smartphone-Breite sowie des DOM (Editor-Container und Attachment-Container) sind angehängt.

I see only one screenshot - are the other ones missing?

[CWL-Informatik]

Hi Stefan,

thanks for the note regarding the screenshots.

I’ve now added three additional screenshots, all taken on a real iPhone in portrait mode, to better illustrate the behavior:

Initial state – CustomerTicketMessage opened, CKEditor visible, no text entered yet.
The attachment upload area and submit button are displayed correctly.

During text input – CKEditor active, on-screen keyboard open, after entering text and scrolling down.
At this point, the editor / sticky toolbar overlaps the attachment upload area, which becomes partially hidden.

After leaving the editor – focus removed from the text field.
The layout returns to a correct state and the attachment area is fully visible again.

This behavior is reproducible on iOS Safari and Chrome, and only appears during active text input combined with scrolling, which may explain why it doesn’t show up in desktop browsers or responsive emulation.

I hope these screenshots make the scenario clearer.
Thanks again for your time and review.

Kind regards
Daniele

[stefanhaerter]

Hi Daniele,

I got confirmation of the bug in the meantime from one of my colleagues, who uses Safari. I'll reopen the issue and it will be discussed internally.

Thanks for reporting!

Kind regards,
Stefan

[chzauleck]

This issue only occurs after installing the FAQ package and seems to be caused by the related faq article message that is then displayed. Could reproduce this on Chrome and Safari.