Snippet dropdowns cut off behind the divider bar

[calculuschild]

Description

This is not a new issue, but testing #3635 made it more obvious since it uses a very narrow editor panel.

Snippet dropdowns are being cut off behind the divider bar. Note how the dropdown appears over the "jump" buttons, so I think the z-index is high enough, but instead some kind of overflow/clipping behavior.

[5e-Cleric]

What is the desired result here, snippet over buttons or buttons over snippet?

[calculuschild]

The problem is snippets on the right edge are not visible because they are hidden behind the brewRenderer. So the desired outcome is they are rendered over the brewRenderer:

[5e-Cleric]

that can be achieve, but will cause issues with the bar wrapped

[calculuschild]

that can be achieve, but will cause issues with the bar wrapped

Not the snippet bar. The dropdowns.

[5e-Cleric]

I know, but the overflow hidden is set in the pane element, it needs to be overriden, which makes that overflow happen.

[Gazook89]

Let’s leave this alone for a few months and see if FF finishes implementing the CSS Anchor Positioning API. That will be the easiest, most comprehensive, and most accessible solution. Chrome already has it. My view modes PR uses it and it’s really really simple.

[Gazook89]

taking my message from gitter and putting it here:

---

<div class="snippetGroup snippetBarButton">
  <div class="text">
    <i class="fas fa-book"></i><span class="groupName">PHB</span>
  </div>
  <div class="dropdown">
    ...
  </div>
</div>

.snippetGroup would get position: relative, .dropdown would get left: 0, and .dropdown:last-child would get left: unset; right: 0.

Possibly do the same with the second to last menu as well.

[5e-Cleric]

My view modes PR uses it and it’s really really simple.

I would not call that simple. Absolute positioning is simple, it needs a maximum of 3 lines of code.