CKEditor 5 full screen toolbar overlaps content in Gin theme

Hi @wrd-oaitsd,

I tried to replicate the issue but I am unable to replicate can you share more information or add steps in STR?

Tested with CKEditor 5 and version 8.x-3.0-rc9

Added standard IS

OK, I was able to reproduce the problem with a standard install. I've added the steps to the issue description.

I'm not sure if this is helpful, but disabling this "top" style seems to fix the problem...at least, it looks that way. I'm not sure if it causes other problems.

.ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
    z-index: 2;
    /* top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important; */

}

The comment in #8 also fixes my issue.

I just created a merge request to address this issue, I use some selectors with more specificity to work with the data attribute the ckeditor5_fullscreen adds.

@josue2591's patches works pretty well. However, I found that the horizontal toolbar still needs to be accounted for. The following CSS did the trick:

[data-fullscreen=fullscreeneditor] .ck .ck.ck-sticky-panel .ck-sticky-panel__content {
  top: 0 !important;
}

.toolbar-horizontal [data-fullscreen=fullscreeneditor].ck.ck-editor,
.toolbar-horizontal [data-fullscreen=fullscreeneditor] .ck .ck.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
  top: var(--gin-toolbar-y-offset) !important;
}
  
[data-fullscreen=fullscreeneditor] .ck .ck.ck-editor__editable {
  max-height: 100%;
}

Note: The solution proposed in #8 does resolve the fullscreen bug reported in this issue. However, remove this top styling would then break the sticky offset happening when it is not in full screen. See attached screenshot for clarification.

pradhumanjain2311 → made their first commit to this issue’s fork.

I went with a way simpler solution to fix this issue. Thanks y'all for participating here 👏

Automatically closed - issue fixed for 2 weeks with no activity.