Investigate tool tip z index on code groups

mintlify / components

UI components for documentation made with React and TailwindCSS.

MIT License

79 stars 12 forks source link

Investigate tool tip z index on code groups #44

Closed NicoZweifel closed 1 year ago

NicoZweifel commented 1 year ago

Investigates https://github.com/mintlify/components/issues/42

I added a Margin to the CodeGroup like with the CodeBlock since z-index won't work when the tooltip is out of bounds, for example in storybook it will not work

with z-index (no change in storybook):
normal CodeBlock

Adding the margin makes the group behave the same way as the CodeBlock, but I am not sure if that is desired or will break the layout in some places without adjustments in the client.

NicoZweifel commented 1 year ago

Yeah I think it is better to not have the margin at all as well, going to change this to z-index soon and add a decorator to the codeblock stories.

NicoZweifel commented 1 year ago

Doesn't seem to work with z-index in the client unfortunately, I'll check some more when I have time 👍

NicoZweifel commented 1 year ago

Seems to be because the client uses z-50 for the navbar, I changed it to 50 here, maybe we can use 40 in the client for the navbar to solve this.

NicoZweifel commented 1 year ago

It might also be a good idea to separate the responsibility of the z-index classes.

z-50: reserve for overlays
z-40: popups, tooltips etc.
z-30: navbars, sidebars etc.

Could of course always seperate them more, for example depending on if the sidebars should be behind the navbars.