search

naturalcrit / homebrewery

Create authentic looking D&D homebrews using only markdown
https://homebrewery.naturalcrit.com
MIT License
1.09k stars 326 forks source link

Snippet dropdowns cut off behind the divider bar #3840

Open calculuschild opened 2 weeks ago

calculuschild commented 2 weeks ago

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.

image

5e-Cleric commented 2 weeks ago

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

calculuschild commented 2 weeks ago

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:

image

5e-Cleric commented 2 weeks ago

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

image

calculuschild commented 2 weeks ago

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

Not the snippet bar. The dropdowns.

5e-Cleric commented 2 weeks ago

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

Gazook89 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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.