Dynamically adjust footer spacing

source/_static/custom.css

@@ -147,6 +147,16 @@
   gap: 20px;
 }
 
+/* Reduce gap when the tabs navigation help item is visible */
+.pyhc-search-dialog .help #tab-help-item[style="display: list-item;"] ~ * {
+  margin-left: 0;
+}
+
+/* Use a special class for condensed mode with smaller gaps */
+.pyhc-search-dialog .help.condensed {
+  gap: 10px;
+}
+
 .pyhc-search-dialog .help li {
   margin: 0;
 }
@@ -164,6 +174,8 @@
   display: flex;
   align-items: center;
   gap: 5px;
+  margin-left: auto; /* Push to right */
+  text-align: right;
 }
 
 .pyhc-search-dialog .credits img {

source/_static/pyhc_search.js

@@ -995,7 +995,8 @@ document.addEventListener('DOMContentLoaded', function() {
   // Update the help text in the footer based on context
   function updateHelpText() {
     const tabHelpItem = document.getElementById('tab-help-item');
-    if (!tabHelpItem) return;
+    const helpContainer = document.getElementById('pyhc-search-help');
+    if (!tabHelpItem || !helpContainer) return;
 
     // Show tab navigation help only when:
     // 1. We're viewing search results (not recent searches)
@@ -1005,8 +1006,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
     if (isTabView && !searchInputHasFocus) {
       tabHelpItem.style.display = 'list-item';
+      helpContainer.classList.add('condensed'); // Add condensed class for smaller gaps
     } else {
       tabHelpItem.style.display = 'none';
+      helpContainer.classList.remove('condensed'); // Remove condensed class
     }
   }