A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing).
However, when this form is contained within a standard html <details> tag, the element's height and possibly its width (specifically the input?) shift, causing some visual distortion when hovering over the input.
What is the root cause of this issue, and is there a specific style that can be implemented on the <details> tag to ensure proper display of the form element?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
<br>
<br>
<details>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</details>Edit: To provide a more concise example, the styling also appears incorrect for a single
<input class="input" type="text" placeholder="Find a repository"><details> tag.