Form rendering is off within a summary section

[yatesco]

This is about Bulma.

Overview of the problem

Description

Forms rendered inside a <details> inside a <nav> don't render correctly. If I remove the <details> and <summary> tag then the form renders correctly. Specifically, the broken form extends past the right hand side of the containing div.

In the screenshot you can see both a working and non-working form:

The broken form is configured:

<nav className="panel">
    <details open>
        <summary className="panel-heading">Forms look good inside collapsible panels</summary>
        <p className="panel-header">
            <div className="panel-block">
                <form>...</.form>
            </div>
        </p>
    </details>
</nav>

The working form is configured:

<nav className="panel">
    <p className="panel-heading">Forms look good inside static panels</p>
    <p className="panel-header">
        <div className="panel-block">
            <form>...</.form>
        </div>
    </p>
</nav>

[yatesco]

The original issue shows <input type="text"..., however the rendering is much worse for select items:

[aelharrak]

Hello @yatesco : i was create an new pull request for this issue :)

BR,
Amine

[dailycommit]

@aelharrak Thank you for the fixes but you should also add
box-sizing: border-box to .controlclass

see: https://www.dropbox.com/s/ribss13dei8l0n8/bulma-box-sizing.mp4?dl=0