Collapse trigger is wider than the "visual trigger element"

[blm768]

Overview of the problem

Oruga version: 0.5.5 Vuejs version: 3.2.45 OS/Browser: Windows 10. Tested in Firefox and Chrome. Probably affects all platforms/browsers.

Description

Like a standard block-layout <div>, the outer trigger <div> for <OCollapse> takes up the full width of its parent. Clicks anywhere within that width will toggle the <OCollapse>, including clicks on areas that appear to be empty background space.

Steps to reproduce

1. Construct an OCollapse with a trigger slot. (The OCollapse base example in the docs exhibits the behavior.)
2. Click in the empty space next to the trigger button.

Expected behavior

The <OCollapse> should not toggle its state if its background is clicked rather than one of its child elements.

Actual behavior

The <OCollapse> toggles its state.

Possible Fixes

I can think of a couple of ways this might be fixed:

1. Style the trigger container such that it doesn't take up the full width of the parent. (Note that if there are multiple child elements within the trigger container, though, especially ones that wrap or have margins between them, there may still be cases where a click on the background would toggle the content.)
2. Ignore click events whose target is the trigger wrapper rather than a child element (unless the trigger wrapper has no visible children).

[jtommy]

You are right, it's a css issues and you can override the style to fix it