folkehelseinstituttet / Fhi.Frontend.Demo

MIT License
2 stars 1 forks source link

fhi-popover-menu buttons looks weird in a table #547

Closed robinzaal closed 2 months ago

robinzaal commented 2 months ago

When a button with class btn fhi-btn-icon fhi-btn-icon--circular fhi-popover-menu-trigger is used inside a <table class="table"> (like shown below, button highligted in red), the button becomes an oval instead of a circle like one would expect from the button documentation.

This applies to anything with a .btn class inside a <table class="table">.

https://github.com/folkehelseinstituttet/Fhi.Frontend.Style/blob/b99e889aeaaeb938d57ef8b81e9b900b75f89554/src/bootstrap-theme/_tables.scss#L51

image

Problem: Buttons in tables has a lower height from @fhi/style and this is inherited, thus giving an oval trigger button

Solution: Explicitly set width and height of .fhi-popover-menu button to 33 in table context