🐞 - Editor exceeds container when placed inside flex container

[hakimio]

Playground Link

No response

Description

• Place the editor in flex container:

  .container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: flex-start;
  }

• Set the editor to only occupy available space:

  tui-editor {
  flex: 1 1 0;
  min-height: 100px;
  }

• This results in the editor exceeding containers height:

Angular version

18

Taiga UI version

4

Which browsers have you used?

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge

Which operating systems have you used?

• [ ] macOS
• [X] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

[hakimio]

Also, the editor-socket inside the editor with visibility: hidden and display:flex causes Taiga dialog to have unwanted extra scrollbar.

[splincode]

Add stackblitz please

[splincode]

will be fixed in next version

[hakimio]

Now we get an ugly default scrollbar and editor's toolbar scrolls with everything else 😕