Mkae columns sortabel agian, check hbc version, provide modile html pages

hbd/server/templates/settings.html

@@ -217,6 +217,49 @@
     .channel-field-value { color: #333; word-break: break-all; }
 
     /* ---- Hosts table ---- */
+    /* ---- Mobile: collapsible sidebar ---- */
+    .sidebar-toggle {
+      display: none;
+      width: 100%;
+      padding: 8px 12px;
+      background: #e8eaf6;
+      border: none;
+      border-radius: 6px;
+      font-size: 0.9em;
+      font-weight: 600;
+      color: #283593;
+      cursor: pointer;
+      text-align: left;
+      margin-bottom: 16px;
+    }
+    .sidebar-toggle::after { content: ' ▾'; float: right; }
+    .sidebar-toggle.open::after { content: ' ▴'; }
+
+    @media (max-width: 640px) {
+      .sidebar-toggle { display: block; }
+
+      .settings-layout { flex-direction: column; gap: 0; }
+
+      .settings-sidebar {
+        width: 100%;
+        position: static;
+        margin-bottom: 0;
+      }
+
+      .sidebar-nav {
+        display: none;
+        background: white;
+        border-radius: 6px;
+        box-shadow: 0 1px 4px rgba(0,0,0,.1);
+        margin-bottom: 16px;
+        padding: 4px 0;
+      }
+      .sidebar-nav.open { display: block; }
+      .sidebar-nav a { padding: 10px 16px; font-size: 1em; }
+
+      .field-row { flex-direction: column; gap: 4px; }
+      .field-label { width: 100%; font-size: 0.82em; color: #888; }
+    }
     .host-bool { text-align: center; }
     .dot-yes { color: #2e7d32; font-size: 1.1em; }
     .dot-no  { color: #ddd;    font-size: 1.1em; }
@@ -233,9 +276,10 @@
 
         <!-- Sidebar navigation -->
         <nav class="settings-sidebar">
+          <button class="sidebar-toggle" id="sidebar-toggle" aria-expanded="false">Sections</button>
           <div class="sidebar-nav" id="sidebar-nav">
             {% for section in sections %}
-            <a href="#{{ section.id }}">{{ section.title }}</a>
+            <a href="#{{ section.id }}" onclick="closeSidebar()">{{ section.title }}</a>
             {% endfor %}
           </div>
         </nav>
@@ -428,6 +472,28 @@
       }, { threshold: 0.25 });
 
       sections.forEach(s => observer.observe(s));
+
+      // Collapsible sidebar on mobile
+      var sidebarToggle = document.getElementById('sidebar-toggle');
+      var sidebarNav = document.getElementById('sidebar-nav');
+      if (sidebarToggle && sidebarNav) {
+        sidebarToggle.addEventListener('click', function() {
+          var open = sidebarNav.classList.toggle('open');
+          sidebarToggle.classList.toggle('open', open);
+          sidebarToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+        });
+      }
+    </script>
+    <script>
+      function closeSidebar() {
+        var sidebarNav = document.getElementById('sidebar-nav');
+        var sidebarToggle = document.getElementById('sidebar-toggle');
+        if (sidebarNav) { sidebarNav.classList.remove('open'); }
+        if (sidebarToggle) {
+          sidebarToggle.classList.remove('open');
+          sidebarToggle.setAttribute('aria-expanded', 'false');
+        }
+      }
     </script>
   </body>
 </html>