Fix the filters title covering other labels (#354)

Fix #293 

There's still a slight difference. The only way to avoid that
completely, would be to remove the default checkbox, and style our own.
But I'm not really keen on that solution.

BTW this styling/positioning will probably be further improved in #292 ,
so this is just a quick solution to make it look better.

Author: zanderle

dist/readthedocs-addons.js

@@ -283,18 +283,27 @@ div.hit-block .hit-block-heading-container svg {
   letter-spacing: 1px;
 }
 
-:host > div .filters li.title {
+:host > div .filters-title {
+  display: block;
   font-size: 0.9rem;
   position: absolute;
-  top: 75px;
+  top: 0;
+  left: 14px;
   background: rgb(252, 252, 252);
   margin: 0 5px;
   padding: 0 5px;
 }
 
 :host > div .filters {
-  padding: 5px 10px;
+  position: relative;
+  padding-top: 0.9rem;
   margin: 0 1.15em;
+}
+
+:host > div .filters ul {
+  display: block;
+  margin: 0;
+  padding: 5px 14px;
   border-radius: 0.3rem;
   border-style: solid;
   border-width: 1px;

dist/readthedocs-addons.js.map

@@ -227,20 +227,22 @@ export class SearchElement extends LitElement {
     // https://lit.dev/docs/templates/lists/#repeating-templates-with-map
     return html`
       <div class="filters">
-        <li class="title">Filters</li>
-        ${this.filters.map(
-          (filter, index) => html`
-            <li>
-              <input
-                @click=${this.filterClicked}
-                id="filter-${index}"
-                type="checkbox"
-                value="${filter.value}"
-              />
-              <label for="filter-${index}"> ${filter.name} </label>
-            </li>
-          `,
-        )}
+        <span class="filters-title">Filters</span>
+        <ul>
+          ${this.filters.map(
+            (filter, index) => html`
+              <li>
+                <input
+                  @click=${this.filterClicked}
+                  id="filter-${index}"
+                  type="checkbox"
+                  value="${filter.value}"
+                />
+                <label for="filter-${index}"> ${filter.name} </label>
+              </li>
+            `,
+          )}
+        </ul>
       </div>
     `;
   }