Add vhosts tab and compact layout · 34ce24c

+11 -5

scripts/host_manager.pl

@@ -2710,6 +2710,14 @@ sub app_html {
     .debug-section { display: grid; gap: 16px; }
     .host-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
     .host-tools input { max-width: 240px; }
+    #page-vhosts .panel-head { align-items: center; padding-block: 10px; }
+    #page-vhosts .host-tools { flex-wrap: wrap; }
+    #page-vhosts .host-tools input { max-width: 280px; }
+    #page-vhosts .stats { justify-content: flex-end; }
+    .vhost-host { display: grid; gap: 2px; }
+    .vhost-host .mono { font-size: 11px; line-height: 1.2; color: var(--muted); }
+    .vhost-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
+    .vhost-pill-row .pill { margin: 0; }
     .modal-backdrop {
       position: fixed;
       inset: 0;
@@ -3485,9 +3493,7 @@ sub app_html {
       const canonical = host.fqdn ? `<span class="pill canonical">${escapeHtml(host.fqdn)}</span>` : '';
       const aliases = (host.aliases || []).map(name => `<span class="pill">${escapeHtml(name)}</span>`).join('');
       const derivedAliases = (host.derived_aliases || []).map(name => `<span class="pill derived" title="derived alias">${escapeHtml(name)}</span>`).join('');
-      const vhosts = (host.vhosts || []).map(name => `<span class="pill vhost">${escapeHtml(name)}</span>`).join('');
-      const derivedVhostAliases = (host.derived_vhost_aliases || []).map(name => `<span class="pill derived vhost" title="derived vhost alias">${escapeHtml(name)}</span>`).join('');
-      return canonical + aliases + derivedAliases + vhosts + derivedVhostAliases;
+      return canonical + aliases + derivedAliases;
     }
 
     function vhostRows() {
@@ -3514,9 +3520,9 @@ sub app_html {
       ].map(([k, v]) => `<span class="stat">${escapeHtml(k)}: ${escapeHtml(String(v))}</span>`).join('');
       $('vhosts').innerHTML = rows.length ? rows.map(row => `<tr>
         <td><span class="pill vhost">${escapeHtml(row.vhost)}</span></td>
-        <td><button type="button" data-edit-vhost-host="${escapeHtml(row.host_id)}">${escapeHtml(row.host_id)}</button><div class="muted mono">${escapeHtml(row.host_fqdn)}</div></td>
+        <td><div class="vhost-host"><button type="button" data-edit-vhost-host="${escapeHtml(row.host_id)}">${escapeHtml(row.host_id)}</button><div class="mono">${escapeHtml(row.host_fqdn)}</div></div></td>
         <td>${escapeHtml(row.ip)}</td>
-        <td>${row.derived_aliases.map(name => `<span class="pill derived vhost">${escapeHtml(name)}</span>`).join('')}</td>
+        <td><div class="vhost-pill-row">${row.derived_aliases.map(name => `<span class="pill derived vhost">${escapeHtml(name)}</span>`).join('')}</div></td>
         <td><span class="pill">${escapeHtml(row.monitoring)}</span></td>
         <td>${escapeHtml(row.status)}</td>
       </tr>`).join('') : '<tr><td colspan="6" class="muted">No vhosts.</td></tr>';


	@@ -2710,6 +2710,14 @@ sub app_html {
2710	2710	.debug-section { display: grid; gap: 16px; }
2711	2711	.host-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
2712	2712	.host-tools input { max-width: 240px; }
	2713	+ #page-vhosts .panel-head { align-items: center; padding-block: 10px; }
	2714	+ #page-vhosts .host-tools { flex-wrap: wrap; }
	2715	+ #page-vhosts .host-tools input { max-width: 280px; }
	2716	+ #page-vhosts .stats { justify-content: flex-end; }
	2717	+ .vhost-host { display: grid; gap: 2px; }
	2718	+ .vhost-host .mono { font-size: 11px; line-height: 1.2; color: var(--muted); }
	2719	+ .vhost-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
	2720	+ .vhost-pill-row .pill { margin: 0; }
2713	2721	.modal-backdrop {
2714	2722	position: fixed;
2715	2723	inset: 0;
	@@ -3485,9 +3493,7 @@ sub app_html {
3485	3493	const canonical = host.fqdn ? `<span class="pill canonical">${escapeHtml(host.fqdn)}</span>` : '';
3486	3494	const aliases = (host.aliases \|\| []).map(name => `<span class="pill">${escapeHtml(name)}</span>`).join('');
3487	3495	const derivedAliases = (host.derived_aliases \|\| []).map(name => `<span class="pill derived" title="derived alias">${escapeHtml(name)}</span>`).join('');
3488		- const vhosts = (host.vhosts \|\| []).map(name => `<span class="pill vhost">${escapeHtml(name)}</span>`).join('');
3489		- const derivedVhostAliases = (host.derived_vhost_aliases \|\| []).map(name => `<span class="pill derived vhost" title="derived vhost alias">${escapeHtml(name)}</span>`).join('');
3490		- return canonical + aliases + derivedAliases + vhosts + derivedVhostAliases;
	3496	+ return canonical + aliases + derivedAliases;
3491	3497	}
3492	3498
3493	3499	function vhostRows() {
	@@ -3514,9 +3520,9 @@ sub app_html {
3514	3520	].map(([k, v]) => `<span class="stat">${escapeHtml(k)}: ${escapeHtml(String(v))}</span>`).join('');
3515	3521	$('vhosts').innerHTML = rows.length ? rows.map(row => `<tr>
3516	3522	<td><span class="pill vhost">${escapeHtml(row.vhost)}</span></td>
3517		- <td><button type="button" data-edit-vhost-host="${escapeHtml(row.host_id)}">${escapeHtml(row.host_id)}</button><div class="muted mono">${escapeHtml(row.host_fqdn)}</div></td>
	3523	+ <td><div class="vhost-host"><button type="button" data-edit-vhost-host="${escapeHtml(row.host_id)}">${escapeHtml(row.host_id)}</button><div class="mono">${escapeHtml(row.host_fqdn)}</div></div></td>
3518	3524	<td>${escapeHtml(row.ip)}</td>
3519		- <td>${row.derived_aliases.map(name => `<span class="pill derived vhost">${escapeHtml(name)}</span>`).join('')}</td>
	3525	+ <td><div class="vhost-pill-row">${row.derived_aliases.map(name => `<span class="pill derived vhost">${escapeHtml(name)}</span>`).join('')}</div></td>
3520	3526	<td><span class="pill">${escapeHtml(row.monitoring)}</span></td>
3521	3527	<td>${escapeHtml(row.status)}</td>
3522	3528	</tr>`).join('') : '<tr><td colspan="6" class="muted">No vhosts.</td></tr>';