🐛(frontend) fix overlapping placeholders in multi-column layout

[Ovgodd]

Purpose

Fix visual issues with placeholders overlapping when multiple columns are created.
Ensure placeholder text is truncated with ellipsis, avoiding confusion when adding multiple columns.

columnslice.mp4

issue : 1445

Proposal

• Prevent overlapping of placeholder content in multi-column layout
• Apply proper text truncation for 2–3 column configurations
• Improve user perception of column creation success

[github-actions]

Size Change: +56 B (0%)

Total Size: 3.66 MB

Filename	Size	Change
apps/impress/out/_next/static/91211b7c/_buildManifest.js	0 B	-864 B (removed)	🏆
apps/impress/out/_next/static/56140772/_buildManifest.js	863 B	+863 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

It is working ok but there is a few side effects by doing like that, this part become somehow clickable, making the cursor at the end.

In collaboration, we have a scrollbar appearing sometimes and some cases where it will move the editors line for other collaborator:

20251007-0840-11.6025223.mp4

What about that instead, with ellipsis when reaching the end ?

.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: inherit;
      height: inherit;
    }

    .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) {
      position: relative;
    }

Open to suggestion.

[Ovgodd]

Oh I didn't see those side effects, nice catch,

hm IMO your suggestion is good and far better.