diff --git a/_includes/css/nerd-font-tweaks.scss b/_includes/css/nerd-font-tweaks.scss
index e34d57de5..d1e54f1cd 100644
--- a/_includes/css/nerd-font-tweaks.scss
+++ b/_includes/css/nerd-font-tweaks.scss
@@ -107,12 +107,16 @@ a.nerd-font-button:before {
 	max-height: 480px;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	padding-top: 20px;
+	margin-top: 40px;
 	max-width: none;
 	justify-content: center;
 	display: flex;
 	flex-flow: row wrap;
 	margin-bottom: 60px;
+	visibility: hidden; /* don't show any by default */
+	&.has-results {
+		visibility: visible;
+	}
 }
 
 #glyphCheatSheet .column {
diff --git a/site.js b/site.js
index 6fdeef091..1cd00df6e 100644
--- a/site.js
+++ b/site.js
@@ -169,11 +169,12 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   function searchGlyphs() {
-    var filter = elementGlyphSearch.value.toLowerCase();
-    var i = 0;
-    var elements = elementGlyphCheatSheet.querySelectorAll('.column');
-    var length = elements.length;
-    var elementClassName, elementCodePoint;
+    const filter = elementGlyphSearch.value.toLowerCase();
+    const elements = elementGlyphCheatSheet.querySelectorAll('.column');
+    const length = elements.length;
+    let i = 0;
+    let elementClassName, elementCodePoint;
+    let anyVisibleColumns = false;
 
     for (; i < length; i++) {
       elementClassName = elements[i].querySelector('div.class-name');
@@ -188,11 +189,19 @@ document.addEventListener('DOMContentLoaded', function () {
             .indexOf(filter) > -1
         ) {
           elementClassName.parentNode.classList.add('is-visible');
+          anyVisibleColumns = true;
         } else {
           elementClassName.parentNode.classList.remove('is-visible');
         }
       }
     }
+
+    if (anyVisibleColumns) {
+      elementGlyphCheatSheet.classList.add('has-results');
+    }
+    else {
+      elementGlyphCheatSheet.classList.remove('has-results');
+    }
   }
 
   // extremely basic filtering on load: