diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
index e443baff0808..91a5c1263195 100644
--- a/util/gh-pages/index_template.html
+++ b/util/gh-pages/index_template.html
@@ -57,119 +57,115 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
         </noscript> {# #}
 
         <div id="menu-filters"> {# #}
-            <div class="panel-body row"> {# #}
-                <div id="upper-filters"> {# #}
-                    <div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
-                        <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
-                        </button> {# #}
-                        <ul class="dropdown-menu"> {# #}
-                            <li class="checkbox"> {# #}
-                                <button class="reset-all">All</button> {# #}
-                            </li> {# #}
-                            <li class="checkbox"> {# #}
-                                <button class="reset-none">None</button> {# #}
-                            </li> {# #}
-                            <li role="separator" class="divider"></li> {# #}
-                            {% for level in ["allow", "warn", "deny", "none"] %}
-                                <li class="checkbox"> {# #}
-                                    <label> {# #}
-                                        <input type="checkbox" name="{{ level }}" checked />
-                                        {{ level | capitalize }}
-                                    </label> {# #}
-                                </li> {# #}
-                            {% endfor %}
-                        </ul> {# #}
-                    </div> {# #}
-                    <div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
-                        <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
-                        </button> {# #}
-                        <ul class="dropdown-menu"> {# #}
-                            <li class="checkbox"> {# #}
-                                <button class="reset-all">All</button> {# #}
-                            </li> {# #}
-                            <li class="checkbox"> {# #}
-                                <button class="reset-default">Default</button> {# #}
-                            </li> {# #}
-                            <li class="checkbox"> {# #}
-                                <button class="reset-none">None</button> {# #}
-                            </li> {# #}
-                            <li role="separator" class="divider"></li> {# #}
-                            {% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
-                                <li class="checkbox"> {# #}
-                                    <label> {# #}
-                                        <input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
-                                        {{ group | capitalize }}
-                                    </label> {# #}
-                                </li> {# #}
-                            {% endfor %}
-                        </ul> {# #}
-                    </div> {# #}
-                    <div id="version-filter" class="dropdown" tabindex="-1"> {# #}
-                        <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Version {#+ #}
-                            <span id="versions-count" class="badge">0</span> {#+ #}
-                            <span class="caret"></span> {# #}
-                        </button> {# #}
-                        <ul class="dropdown-menu"> {# #}
+            <div id="upper-filters"> {# #}
+                <div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
+                    <button type="button" class="btn-default dropdown-toggle"> {# #}
+                        Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
+                    </button> {# #}
+                    <ul class="dropdown-menu"> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-all">All</button> {# #}
+                        </li> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-none">None</button> {# #}
+                        </li> {# #}
+                        <li role="separator" class="divider"></li> {# #}
+                        {% for level in ["allow", "warn", "deny", "none"] %}
                             <li class="checkbox"> {# #}
-                                <button id="reset-versions">Clear filters</button> {# #}
+                                <label> {# #}
+                                    <input type="checkbox" name="{{ level }}" checked />
+                                    {{ level | capitalize }}
+                                </label> {# #}
                             </li> {# #}
-                            <li role="separator" class="divider"></li> {# #}
-                            {% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
-                                <li class="checkbox"> {# #}
-                                    <label>{{ sym }}</label> {#+ #}
-                                    <span>1.</span> {# #}
-                                    <input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
-                                    <span>.0</span> {# #}
-                                </li> {# #}
-                            {% endfor %}
-                        </ul> {# #}
-                    </div> {# #}
-                    <div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
-                        <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Applicability {#+ #}
-                            <span id="applicabilities-count" class="badge">4</span> {#+ #}
-                            <span class="caret"></span> {# #}
-                        </button> {# #}
-                        <ul class="dropdown-menu"> {# #}
+                        {% endfor %}
+                    </ul> {# #}
+                </div> {# #}
+                <div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
+                    <button type="button" class="btn-default dropdown-toggle"> {# #}
+                        Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
+                    </button> {# #}
+                    <ul class="dropdown-menu"> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-all">All</button> {# #}
+                        </li> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-default">Default</button> {# #}
+                        </li> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-none">None</button> {# #}
+                        </li> {# #}
+                        <li role="separator" class="divider"></li> {# #}
+                        {% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
                             <li class="checkbox"> {# #}
-                                <button class="reset-all">All</button> {# #}
+                                <label> {# #}
+                                    <input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
+                                    {{ group | capitalize }}
+                                </label> {# #}
                             </li> {# #}
+                        {% endfor %}
+                    </ul> {# #}
+                </div> {# #}
+                <div id="version-filter" class="dropdown" tabindex="-1"> {# #}
+                    <button type="button" class="btn-default dropdown-toggle"> {# #}
+                        Version {#+ #}
+                        <span id="versions-count" class="badge">0</span> {#+ #}
+                        <span class="caret"></span> {# #}
+                    </button> {# #}
+                    <ul class="dropdown-menu"> {# #}
+                        <li class="checkbox"> {# #}
+                            <button id="reset-versions">Clear filters</button> {# #}
+                        </li> {# #}
+                        <li role="separator" class="divider"></li> {# #}
+                        {% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
                             <li class="checkbox"> {# #}
-                                <button class="reset-none">None</button> {# #}
+                                <label>{{ sym }}</label> {#+ #}
+                                <span>1.</span> {# #}
+                                <input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
+                                <span>.0</span> {# #}
                             </li> {# #}
-                            <li role="separator" class="divider"></li> {# #}
-                            {% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
-                                <li class="checkbox"> {# #}
-                                    <label> {# #}
-                                        <input type="checkbox" name="{{ applicability }}" checked />
-                                        {{ applicability }}
-                                    </label> {# #}
-                                </li> {# #}
-                            {% endfor %}
-                        </ul> {# #}
-                    </div> {# #}
+                        {% endfor %}
+                    </ul> {# #}
                 </div> {# #}
-                <div class="search-control"> {# #}
-                    <div class="input-group"> {# #}
-                        <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
-                        <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
-                        <button id="filter-clear" type="button"> {# #}
-                            Clear {# #}
-                        </button> {# #}
-                    </div> {# #}
-                </div> {# #}
-                <div class="btn-group expansion-group"> {# #}
-                    <button title="Collapse All" class="btn-default expansion-control" type="button" id="collapse-all"> {# #}
-                        <span class="glyphicon glyphicon-collapse-up"></span> {# #}
-                    </button> {# #}
-                    <button title="Expand All" class="btn-default expansion-control" type="button" id="expand-all"> {# #}
-                        <span class="glyphicon glyphicon-collapse-down"></span> {# #}
+                <div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
+                    <button type="button" class="btn-default dropdown-toggle"> {# #}
+                        Applicability {#+ #}
+                        <span id="applicabilities-count" class="badge">4</span> {#+ #}
+                        <span class="caret"></span> {# #}
                     </button> {# #}
+                    <ul class="dropdown-menu"> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-all">All</button> {# #}
+                        </li> {# #}
+                        <li class="checkbox"> {# #}
+                            <button class="reset-none">None</button> {# #}
+                        </li> {# #}
+                        <li role="separator" class="divider"></li> {# #}
+                        {% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
+                            <li class="checkbox"> {# #}
+                                <label> {# #}
+                                    <input type="checkbox" name="{{ applicability }}" checked />
+                                    {{ applicability }}
+                                </label> {# #}
+                            </li> {# #}
+                        {% endfor %}
+                    </ul> {# #}
                 </div> {# #}
             </div> {# #}
+            <div class="search-control"> {# #}
+                <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
+                <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
+                <button id="filter-clear" type="button"> {# #}
+                    Clear {# #}
+                </button> {# #}
+            </div> {# #}
+            <div class="btn-group expansion-group"> {# #}
+                <button title="Collapse All" class="btn-default expansion-control" type="button" id="collapse-all"> {# #}
+                    <span class="glyphicon glyphicon-collapse-up"></span> {# #}
+                </button> {# #}
+                <button title="Expand All" class="btn-default expansion-control" type="button" id="expand-all"> {# #}
+                    <span class="glyphicon glyphicon-collapse-down"></span> {# #}
+                </button> {# #}
+            </div> {# #}
         </div>
         {% for lint in lints %}
             <article id="{{lint.id}}"> {# #}
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
index 18bb95cf67b6..242e2227ed94 100644
--- a/util/gh-pages/style.css
+++ b/util/gh-pages/style.css
@@ -113,29 +113,26 @@ label {
     background: var(--bg);
     border: 1px solid var(--theme-popup-border);
     box-shadow: 0 1px 1px rgba(0,0,0,.05);
+    display: block;
 }
 
-div.panel-body {
-    padding: 15px;
-}
-div.panel-body::before, div.panel-body::after {
-    display: table;
-    content: " ";
-}
-div.panel-body::after {
-    clear: both;
+#menu-filters {
+    padding: 15px 0;
+    display: flex;
+    flex-direction: column;
 }
-div.panel-body button {
+
+#menu-filters button {
     background: var(--searchbar-bg);
     border-color: var(--theme-popup-border);
     color: var(--searchbar-fg);
 }
 
-div.panel-body button:hover {
+#menu-filters button:hover {
     box-shadow: 0 0 3px var(--searchbar-shadow-color);
 }
 
-div.panel-body  button.open {
+#menu-filters  button.open {
     filter: brightness(90%);
 }
 
@@ -242,25 +239,38 @@ article:hover .panel-title-name .anchor { display: inline;}
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
+    display: flex;
 }
 
-.input-group {
-    position: relative;
+#filter-label {
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    white-space: nowrap;
     display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 }
-.input-group > :last-child {
+.search-control > :last-child {
     border-left: 0;
 }
-.input-group > :first-child, .btn-group > :first-child {
+.btn-group > :first-child {
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-.input-group > :last-child, .btn-group > :last-child {
+.search-control > :last-child, .btn-group > :last-child {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.input-group .form-control:not(:first-child):not(:last-child) {
+.search-control .form-control:not(:first-child):not(:last-child) {
     border-radius: 0;
 }
 .form-control:focus {
@@ -268,19 +278,6 @@ article:hover .panel-title-name .anchor { display: inline;}
     outline: 0;
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
 }
-.input-group-addon {
-    padding: 6px 12px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1;
-    text-align: center;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
 .glyphicon.glyphicon-collapse-up::before, .glyphicon.glyphicon-collapse-down::before {
     --background-img-size: 14px;
@@ -343,6 +340,7 @@ article:hover .panel-title-name .anchor { display: inline;}
 @media (min-width: 992px) {
     .search-control {
         margin-top: 0;
+        align-self: flex-start;
     }
     .container {
         width: 970px;
@@ -357,6 +355,10 @@ article:hover .panel-title-name .anchor { display: inline;}
         margin-top: 0;
         padding: 0px 15px;
         width: 16.66666667%;
+        align-self: flex-start;
+    }
+    #menu-filters {
+        flex-direction: row;
     }
 }
 
@@ -376,7 +378,7 @@ article:hover .panel-title-name .anchor { display: inline;}
 
 @media (max-width: 412px) {
     #upper-filters,
-    .panel-body .search-control  {
+    #menu-filters .search-control  {
         padding-right: 8px;
         padding-left: 8px;
     }
@@ -617,6 +619,7 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
     color: var(--fg);
     background: var(--theme-hover);
     border: 1px solid var(--theme-popup-border);
+    padding: 8px;
 }
 .page-header {
     border: 0;