>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3418963. --> Reported by: [wrd-oaitsd](https://www.drupal.org/user/3683993) Related to !412 !403 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Discovered the following today while setting up a new CKE5 editor on a site. When CKE5 is in full-screen mode, it looks like this in the Claro theme:</p> <p><img src="https://www.drupal.org/files/issues/2024-02-02/Screenshot%202024-02-02%20at%2011.32.46%E2%80%AFAM.png" alt="Screenshot of CKEditor 5 toolbar positioned above Lorem Ipsum text in full-screen mode."></p> <p>In the Gin theme, it looks like this:</p> <p><img src="https://www.drupal.org/files/issues/2024-02-02/Screenshot%202024-02-02%20at%2011.33.33%E2%80%AFAM.png" alt="Screenshot of CKEditor 5 toolbar overlapping Lorem Ipsum text in full-screen mode."></p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>1. Perform a standard install of 10.2.3.<br> 2. Enable the "ckeditor5_fullscreen" module (version 1.0.0-beta7 -- can also reproduce with 1.0.x-dev).<br> 3. Edit the "Basic" text editor and add the Full Screen button to the toolbar. Save the editor. Clear cache.<br> 4. Create a Basic Page, and click the Full Screen button. The editor should look like this:</p> <p><img src="https://www.drupal.org/files/issues/2024-02-13/Screenshot%202024-02-13%20at%209.24.19%E2%80%AFAM_0.png" alt="Image of basic editor with added full screen button in full screen mode in Claro theme."></p> <p>5. Enable the Gin theme (version 8.x-3.0-rc9).<br> 6. Switch the administration theme to Gin, set to use the admin theme for editing content.<br> 7. Create a Basic Page, and click the Full Screen button. The editor should look like this:</p> <p><img src="https://www.drupal.org/files/issues/2024-02-13/Screenshot%202024-02-13%20at%209.28.17%E2%80%AFAM_0.png" alt="Image of basic editor with added full screen button in full screen mode in Gin theme."></p> <ul> <li>I see the same result in both Safari and Chrome.</li> <li>The problem is more pronounced with the horizontal toolbar, but appears with the vertical toolbar as well.</li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>