Skip to content

Commit

Permalink
HTML Reporter: Restore float-clear following e31c8d3
Browse files Browse the repository at this point in the history
I broke this element, and didn't notice it during testing because
on all the tiniest of viewports, this clearfix is actually not needed
because we use flexbox, which already makes each row in the interface
naturally float-clearing. It's only in small sub-500px height viewports
that the bug manifests.

Also add a min-height to ensure the action buttons won't fall outside
the rectangle. This is possible since the previous version because we
now use absolute position on wider viewports instead of float. This
has the benefit of ensuring the result lines and their hover/active
state are consistently full-width and continuous, but also means the
buttons aren't naturally contained within the dropdown layout.
  • Loading branch information
Krinkle committed May 2, 2022
1 parent 763948a commit 87c90ce
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/html-reporter/html.js
Expand Up @@ -576,7 +576,7 @@ export function escapeText (str) {
clearfix.className = 'clearfix';

toolbar.appendChild(toolbarFilters);
toolbar.appendChild(document.createElement('div'));
toolbar.appendChild(clearfix);
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/qunit.css
Expand Up @@ -226,6 +226,10 @@
top: 100%;
margin-top: 2px;

/* ensure that when on a narrow viewports and having only one result,
that #qunit-modulefilter-actions fall outside the dropdown rectangle. */
min-height: 3em;

border: 1px solid #AAA;
border-top-color: transparent;
border-radius: 0 0 .25em .25em;
Expand Down

0 comments on commit 87c90ce

Please sign in to comment.