Search result only shows title & thumbnail, more info on hover.

Clicking search result thumbnail (overlay) installs it. So does clicking "install" button.
Fixed author link installing the sytle.
Removed bg-color change on hover.

popup.html

@@ -85,8 +85,20 @@
 
   <template data-id="searchResult">
     <div class="search-result">
-      <h3 class="search-result-title"></h3>
+      <a class="search-result-title"></a>
+      <div class="search-result-info">
         <img class="search-result-screenshot" />
+        <div class="search-result-overlay">
+          <div class="actions">
+            <button class="search-result-install" i18n-text="installButton"></button>
+            <button class="search-result-customize hidden"
+                    i18n-text="searchResultCustomize"
+                    i18n-title="searchResultCustomizeTooltip"></button>
+          </div>
+          <div class="search-result-author">
+            <label i18n-text="author"></label>:
+            <a class="search-result-author-link" target="_blank"></a>
+          </div>
           <div class="search-result-description-group">
             <div class="search-result-description"></div>
             <div class="search-result-description-info">
@@ -95,10 +107,6 @@
               </svg>
             </div>
           </div>
-      <div class="search-result-author">
-        <label i18n-text="author"></label>:
-        <a class="search-result-author-link" target="_blank"></a>
-      </div>
           <div class="search-result-meta">
             <div class="search-result-meta-rating">
               <span i18n-text="searchResultRating"></span>:
@@ -109,11 +117,7 @@
               <span class="search-result-install-count"></span>
             </div>
           </div>
-      <div class="actions">
+        </div>
-        <button class="search-result-install" i18n-text="installButton"></button>
-        <button class="search-result-customize hidden"
-                i18n-text="searchResultCustomize"
-                i18n-title="searchResultCustomizeTooltip"></button>
       </div>
     </div>
   </template>

popup/search-results.css

@@ -24,19 +24,43 @@ body.search-results-shown {
 .search-result {
   padding: 5px;
 }
-.search-result:hover {
-  background-color: rgba(50, 150, 255, 0.5);
-}
 
 .search-result-screenshot {
-  max-height: 120px;
+  height: 140px;
   width: 100%;
   object-fit: cover;
 }
 
 .search-result-title {
   padding: 3px;
-  margin: 0;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.search-result-info {
+  position: relative;
+}
+
+.search-result-overlay {
+  width: 100%;
+  height: 140px;
+  position: absolute;
+  top: 0;
+  opacity: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  transition: opacity linear 0.2s;
+}
+.search-result-info:hover .search-result-overlay {
+  opacity: 1;
+}
+
+.search-result-overlay > .actions {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.search-result-overlay > :not(.actions) {
+  margin: 0 10px 0 10px;
 }
 
 .search-result-author-link {
@@ -53,8 +77,10 @@ body.search-results-shown {
 
 .search-result-description.expanded {
   width: 100%;
+  max-height: 100%;
   white-space: pre-wrap;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
   text-overflow: unset;
   display: block;
 }

popup/search-results.js

@@ -292,13 +292,14 @@
         id: 'search-result-' + userstyleSearchResult.id,
         onclick: handleEvent.openURLandHide
       });
-      entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
       $('#search-results-list').appendChild(entry);
 
       const searchResultName = userstyleSearchResult.name;
       const title = $('.search-result-title', entry);
       Object.assign(title, {
-        textContent: searchResultName
+        textContent: searchResultName,
+        onclick: handleEvent.openURLandHide,
+        href: searchAPI.BASE_URL + userstyleSearchResult.url
       });
 
       const screenshot = $('.search-result-screenshot', entry);
@@ -314,6 +315,8 @@
         title: searchResultName
       });
 
+      $('.search-result-overlay', entry).onclick = install;
+
       const description = $('.search-result-description', entry);
       Object.assign(description, {
         textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
@@ -332,7 +335,10 @@
         textContent: userstyleSearchResult.user.name,
         title: userstyleSearchResult.user.name,
         href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
-        onclick: handleEvent.openURLandHide
+        onclick: event => {
+          event.stopPropagation();
+          handleEvent.openURLandHide.call(authorLink, event);
+        }
       });
 
       const rating = $('.search-result-rating', entry);