Как сделать открывающуюся менюшку по заданному шаблону?

Делаю пэт-проект и столкнулся с проблемой на фронтэнде. Решил сделать текстовый редактор, в котором контент разбивается на блоки (заголовки, параграфы и т.д.), у каждого блока рядом есть кнопка, по нажатию которой должны появляться дополнительные опции для данного блока.

Пример:

То, что я сделал:

Менюшка должна отображать свой контент поверх другого контента, должна быть привязана к своей кнопке позиционно (оставаться на месте относительно данной кнопки), не расширять div в котором находится кнопка. (Вроде все, что надо перечислил)

Теперь мой код. Я использую tauri + solid + tailwind.

Меню:

import { Component, createSignal, ParentComponent, Show } from 'solid-js';
import { Portal, render } from 'solid-js/web';

const EditorBlockMenu: ParentComponent = (props) => {
    return (
        <div class='editor-block-menu'>
            <div><button>Delete</button></div>
            <div><button>Move Up</button></div>
            <div><button>Move Down</button></div>
        </div>
    )
}

const EditorBlockBtn: ParentComponent = () => {
    const [toggle, setToggle] = createSignal(false)
    const isToggle = () => setToggle(!toggle())

    return (
        <div>
            <button onClick={isToggle}></button>
            <Show
                when={toggle()}
                fallback={<></>}
            >
                <EditorBlockMenu/>
            </Show>
        </div>
    )
}

export default EditorBlockBtn;

Блок с контентом и кнопкой:

import { ParentComponent } from 'solid-js';
import EditorBlockBtn from './EditorBlockBtn';

const EditorBlock: ParentComponent = (props) => {
    return (
        <div class='editor-block'>
            <EditorBlockBtn/>
            {props.children}
        </div>
    )
}

export default EditorBlock;

CSS:

.editor-block {
  @apply
  grid grid-cols-[40px,_1fr] gap-2
  overflow-hidden
  py-2
}

.editor-block-menu {
  @apply
  fixed 
  grid p-1 gap-1
  border border-zinc-400 rounded-md
  bg-white
  shadow-lg shadow-zinc-400
  z-10 /* нужно ли? */
}

*ps: как видно пробовал исправить проблему используя position, но привязки к кнопке не было.

HTML (копирую из DevTools, постарался выравнить для читабельности)

<div class="editor-block">
<div>
   <button></button>
   <div class="editor-block-menu">
       <div><button>Delete</button></div>
       <div><button>Move Up</button></div>
       <div><button>Move Down</button></div>
   </div>
</div>
    <p contenteditable="">Pellentesque convallis ipsum nec facilisis molestie. Nunc nec 
    convallis magna, eget ullamcorper neque. Nullam tincidunt justo magna, eu cursus nisl 
    dignissim at. Donec rhoncus dictum dictum. Quisque sed leo lectus. Donec commodo sapien 
    quis libero ultrices, et ornare arcu faucibus. Duis maximus accumsan <b>sapien</b>, 
    tincidunt suscipit neque sollicitudin eget. Sed feugiat ipsum lorem, id pellentesque 
    nisl suscipit id.&nbsp;</p>
</div>

---

Изменения

CSS

.editor-block {
  @apply
  relative
  grid grid-cols-[40px,_1fr] gap-2
  overflow-hidden
  py-2
}

.editor-block-menu {
  @apply
  absolute
  min-w-max
  grid p-1 gap-1
  border border-zinc-400 rounded-md
  bg-white
  shadow-md shadow-zinc-300
  z-10
}

Использовал relative в родительском диве и absolute в дочернем, чтобы менюшка оставалась рядом с кнопкой, но теперь она обрезается. (Если использовать без relative менюшка при скролле остается на месте относительно окна, а не относительно кнопки)