Few UI cleanups

frontend/src/js/app.js

@@ -684,10 +684,19 @@ class App {
     _applyPreferences() {
         const prefs = this.state.preferences;
 
-        // Sidebar width
+        // Sidebar width (drives the grid column width).
+        // Use the CSS variable so the workspace never sits underneath the sidebar.
+        const root = document.documentElement;
         const sidebar = document.getElementById('sidebar');
-        if (sidebar && prefs.sidebarWidth) {
-            sidebar.style.width = `${prefs.sidebarWidth}px`;
+        const parsedSidebarWidth = Number(prefs.sidebarWidth);
+        if (Number.isFinite(parsedSidebarWidth) && parsedSidebarWidth > 0) {
+            const clampedWidth = Math.max(180, Math.min(500, Math.round(parsedSidebarWidth)));
+            root.style.setProperty('--sidebar-width', `${clampedWidth}px`);
+        } else {
+            root.style.removeProperty('--sidebar-width');
+        }
+        if (sidebar) {
+            sidebar.style.width = '';
         }
 
         // Status bar visibility
@@ -695,6 +704,12 @@ class App {
         if (statusBar) {
             statusBar.style.display = prefs.showStatusBar === false ? 'none' : 'flex';
         }
+
+        // Refit any visible terminal after geometry changes.
+        requestAnimationFrame(() => {
+            this.terminals.fitActive();
+            this.splitPanes.refitAll();
+        });
     }
 
     /**

frontend/src/js/settings.js

@@ -79,6 +79,9 @@ class Settings {
             if (this.app.terminals && this._prefs.terminalTheme) {
                 this.app.terminals.applyTheme(this._prefs.terminalTheme);
             }
+            if (this.app && typeof this.app._applyPreferences === 'function') {
+                this.app._applyPreferences();
+            }
 
             this.app.notifications.success('Settings saved');
             this.close();

frontend/src/js/sidebar.js

@@ -138,12 +138,16 @@ class Sidebar {
     _renderSection(title, key, profiles) {
         const section = createElement('div', 'sidebar-section');
         const isCollapsed = this.collapsedSections.has(key);
+        const isGroupSection = key.startsWith('group:');
 
         // Section header
-        const header = createElement('div', 'sidebar-section-header');
+        const header = createElement(
+            'div',
+            `sidebar-section-header ${isGroupSection ? 'sidebar-section-header-group' : ''}`.trim()
+        );
         header.innerHTML = `
             <span class="section-chevron ${isCollapsed ? 'collapsed' : ''}">${isCollapsed ? '▸' : '▾'}</span>
-            <span>${escapeHtml(title)}</span>
+            <span class="section-title">${escapeHtml(title)}</span>
             <span class="section-count">${profiles.length}</span>
         `;
         // Prevent mousedown from starting a text selection gesture in WKWebView,
@@ -182,20 +186,24 @@ class Sidebar {
             item.classList.add('sidebar-item-active');
         }
 
-        // Protocol colour dot
-        const dot = createElement('span', `protocol-indicator ${protocolColour(profile.protocol)}`);
-        item.appendChild(dot);
+        // Protocol icon
+        const protocolLabel = "";  // Seemed pretty naff to have this as well as the little icon badboy this._protocolLabel(profile.protocol);
+        const indicator = createElement('span', `protocol-indicator ${protocolColour(profile.protocol)}`, {
+            title: protocolLabel,
+            'aria-label': protocolLabel,
+        });
+        item.appendChild(indicator);
 
         // Text content
         const textWrapper = createElement('div', 'sidebar-item-text');
+        const displayName = (profile.displayName || '').trim();
+        const primaryLabel = displayName || profile.host || 'Untitled';
         const nameEl = createElement('span', 'sidebar-item-name', {
-            textContent: profile.displayName || profile.host || 'Untitled',
+            textContent: primaryLabel,
         });
         textWrapper.appendChild(nameEl);
 
-        const subtitle = profile.host
-            ? `${profile.host}:${profile.port}`
-            : profile.protocol.toUpperCase();
+        const subtitle = protocolLabel;
         const subEl = createElement('span', 'sidebar-item-host', {
             textContent: truncate(subtitle, 30),
         });
@@ -424,6 +432,27 @@ class Sidebar {
             .sort((a, b) => b.score - a.score)
             .map((r) => r.profile);
     }
+
+    /**
+     * Returns a display label for a protocol.
+     * @param {string} protocol
+     * @returns {string}
+     * @private
+     */
+    _protocolLabel(protocol) {
+        switch (protocol) {
+            case 'github':
+                return 'GitHub';
+            case 'ssh':
+                return 'SSH';
+            case 'telnet':
+                return 'TELNET';
+            case 'raw':
+                return 'RAW';
+            default:
+                return (protocol || '').toUpperCase() || 'UNKNOWN';
+        }
+    }
 }
 
 window.NexusTerminal = window.NexusTerminal || {};