Fixing over-styling in search-results.css

* Right-padding to account for scrollbar when showing search results.
* No 'max-width' anymore -- width adjusts to popup width.
* Description uses ellilpsis on overflow.
  * Still needs info/expando (and need to remove title-text)
* Screenshots have 'object-fit:cover' to fill the space.

Unrelated: Hack for search category 'userstyles' (should be userstyles.org)

popup/search-results.css

@@ -1,6 +1,7 @@
 body.search-results-shown {
   overflow-y: auto;
   overflow-x: hidden;
+  padding-right: 20px;
 }
 
 #disable-all-wrapper {
@@ -8,11 +9,6 @@ body.search-results-shown {
   margin-bottom: 5px;
 }
 
-#searchResults,
-#find-styles {
-  display: block;
-}
-
 .hidden {
   display: none !important;
 }
@@ -25,11 +21,6 @@ body.search-results-shown {
   margin-right: 20px;
 }
 
-#searchResults, #searchResults-list {
-  max-width: 200px;
-  overflow: hidden;
-}
-
 .searchResult {
   padding: 5px;
 }
@@ -37,17 +28,14 @@ body.search-results-shown {
   background-color: rgba(50, 150, 255, 0.5);
 }
 .searchResult.loading {
+  background-color: rgba(90, 90, 90, 0.5);
   opacity: 0.5;
 }
 
-.searchResult img {
+.searchResult-screenshot {
-  display: block;
+  max-height: 120px;
-  max-width: 180px;
+  width: 100%;
-  max-height: 180px;
+  object-fit: cover;
-}
-.searchResult-screenshot.no-screenshot {
-  width: 180px;
-  height: 40px;
 }
 
 .searchResult-title {
@@ -56,13 +44,9 @@ body.search-results-shown {
 }
 
 .searchResult-description {
-  overflow: hidden;
-  font-style: italic;
-}
-
-.searchResult > * {
-  overflow-x: hidden;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .searchResult-author {
@@ -76,6 +60,7 @@ body.search-results-shown {
 
 .searchResult-metaRating, .searchResult-metaInstallCount {
   display: table-cell;
+  text-align: center;
 }
 
 .searchResult-rating {
@@ -96,6 +81,10 @@ body.search-results-shown {
   background-color: #333;
 }
 
+.searchResult-installCount {
+  font-weight: 600;
+}
+
 .searchResult-install {
   width: 100%;
 }
@@ -122,9 +111,3 @@ body.search-results-shown {
 #searchResultsNav button {
   text-align: center;
 }
-
-#searchResultsNav-prev[disabled],
-#searchResultsNav-next[disabled] {
-  cursor: not-allowed;
-  background-image: linear-gradient(rgba(90, 90, 90, 0.5), rgba(90, 90, 90, 0.5));
-}

popup/search-results.js

@@ -14,12 +14,8 @@
           $('#find-styles-inline').checked = false;
 
           const searchResults = searchResultsController();
-          $('#searchResultsNav-prev').onclick = searchResults.prev;
+          searchResults.init();
-          $('#searchResultsNav-next').onclick = searchResults.next;
           searchResults.load();
-          document.body.classList.add('search-results-shown');
-
-          window.scrollTo(0, 0);
 
           // Avoid propagating click to anchor/href
           event.preventDefault();
@@ -49,7 +45,15 @@
     let category; // Category for the active tab's URL.
     let currentDisplayedPage = 1; // Current page number in popup.html
 
-    return {load, next, prev};
+    return {init, load, next, prev};
+
+    function init() {
+      $('#searchResultsNav-prev').onclick = prev;
+      $('#searchResultsNav-next').onclick = next;
+      document.body.classList.add('search-results-shown');
+      window.scrollTo(0, 0);
+      load();
+    }
 
     function render() {
       $('#searchResults-list').textContent = ''; // Clear search results
@@ -440,8 +444,11 @@ function searchUserstyles() {
       return 'STYLUS'; // Stylus page
     } else {
       // Website address, strip TLD & subdomain
-      const domainRegex = /^www\.|(\.com?)?\.\w+$/g;
+      let domain = u.hostname.replace(/^www\.|(\.com?)?\.\w+$/g, '').split('.').pop();
-      return u.hostname.replace(domainRegex, '').split('.').pop();
+      if (domain === 'userstyles') {
+        domain = 'userstyles.org';
+      }
+      return domain;
     }
   }