Popup doesn't overflow-x anymore. Formatting seems... okay.

popup.html

@@ -132,13 +132,13 @@
       <h3>Search Results for <span id="searchResults-terms">-</span></h3>
       <div id="searchResults"></div>
       <div id="searchResultsNav">
-        <button id="searchResultsNav-prev" title="Previous page" disabled>&lt;</button>
+        <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
         <label>
           <span id="searchResultsNav-currentPage" title="Current page">-</span>
           /
           <span id="searchResultsNav-totalPages" title="Total pages of search results">-</span>
         </label>
-        <button id="searchResultsNav-next" title="Next page" disabled>&gt;</button>
+        <button id="searchResultsNav-next" title="Next page" disabled>Next</button>
       </div>
     </div>
     <div class="left-gutter"></div>

popup/popup.css

@@ -1,5 +1,7 @@
 html, body {
   height: min-content;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 body {

popup/remoteStyles.css

@@ -21,11 +21,13 @@
 }
 
 .searchResult img {
-  width: 50px;
-  height: 40px;
+  display: block;
+  max-width: 180px;
+  max-height: 180px;
 }
 
 .searchResult-title {
+  display: block;
   font-weight: bold;
 }
 
@@ -35,25 +37,24 @@
 }
 
 .searchResult > * {
-  max-width: 108px;
-  overflow-x: ellipsis;
+  overflow-x: hidden;
   white-space: nowrap;
 }
 
 #searchResultsNav {
-  display: flex;
   flex-direction: row;
   text-align: center;
+  word-break: keep-all;
 }
 
 #searchResultsNav label {
-  width: 20px;
+  width: 40px;
   display: inline-block;
+  word-break: keep-all;
 }
 
 #searchResultsNav button {
   text-align: center;
-  width: 10px;
 }
 
 #searchResultsNav-prev[disabled],

popup/remoteStyles.js

@@ -16,7 +16,6 @@ function fetchSearchResults(queryParams) {
       'Accept': '*/*'
     };
     const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
-    console.log('fetchSearchResults url:', url);
     const xhr = new XMLHttpRequest();
     xhr.timeout = TIMEOUT;
     xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
@@ -31,6 +30,10 @@ function fetchSearchResults(queryParams) {
   });
 }
 
+/**
+ *
+ * @param {Object} searchResult The JSON object from userstyles.org representing a search result.
+ */
 function createSearchResultElement(searchResult) {
   /*
     searchResult format:
@@ -45,14 +48,11 @@ function createSearchResultElement(searchResult) {
       }
     }
   */
-  console.log('createSearchResultElement searchResult:', searchResult);
-
   const entry = template.searchResult.cloneNode(true);
   Object.assign(entry, {
     id: ENTRY_ID_PREFIX_RAW + searchResult.id,
     styleId: searchResult.id
   });
-  console.log('createSearchResultElement entry:', entry);
 
   const title = $('.searchResult-title', entry);
   Object.assign(title, {
@@ -69,14 +69,14 @@ function createSearchResultElement(searchResult) {
   }
   Object.assign(screenshot, {
     src: ss_url,
-    title: 'Screenshot of ' + searchResult.name
+    title: searchResult.name
   });
 
   // TODO: Expand/collapse description
   const description = $('.searchResult-description', entry);
   Object.assign(description, {
     textContent: searchResult.description.replace(/<.*?>/g, ""),
-    title: searchResult.description.replace(/<.*?>/g, ""),
+    title: searchResult.description.replace(/<.*?>/g, "")
   });
 
   const authorLink = $('.searchResult-authorLink', entry);