diff --git a/Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css b/Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css index 44fa5e4..0cbe781 100644 --- a/Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css +++ b/Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css @@ -130,8 +130,7 @@ /* Containers+VMs: single column when viewport is narrow */ @media (max-width: 900px) { - .vv-df-cols { flex-direction: column; } - .vv-df-fname { flex: 0 1 auto; } + .vv-df-cols { flex-direction: column; align-items: stretch; } } /* Phone layout — scheduler row/actions fixes + monitor single-column */ diff --git a/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php b/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php index 40c8b2c..fdacfef 100644 --- a/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php +++ b/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php @@ -325,7 +325,7 @@ function vvRenderMemory(mem) {
${vvFmtGib(usedKb)} / ${vvFmtGib(total)}
-
${procStrip}
+
${procStrip}
`; html += vvMemRow('System', mem.system_kb ?? 0, total, VV_MEM_COLORS.system) + vvMemRow('VM', mem.vm_kb ?? 0, total, VV_MEM_COLORS.vm) @@ -1143,7 +1143,7 @@ function vvRenderDockerFolders(data) { const total = f.containers.length; const running = f.containers.filter(c => c.running).length; const bColor = running === total ? '#4caf50' : running === 0 ? '#555' : '#ff9800'; - const badge = `${running}/${total}`; + const badge = `${running}/${total}`; const sid = f.id.replace(/\\/g,'\\\\').replace(/'/g,"\\'"); let iconHtml = ''; @@ -1180,15 +1180,18 @@ function vvRenderDockerFolders(data) { return; } - // 2-column balanced split - const half = Math.ceil(allFolders.length / 2); - const left = allFolders.slice(0, half); - const right = allFolders.slice(half); - - html += `
-
${left.map(renderFolder).join('')}
-
${right.map(renderFolder).join('')}
-
`; + // 2-column balanced split — single column on narrow screens + if (window.innerWidth <= 640) { + html += `
${allFolders.map(renderFolder).join('')}
`; + } else { + const half = Math.ceil(allFolders.length / 2); + const left = allFolders.slice(0, half); + const right = allFolders.slice(half); + html += `
+
${left.map(renderFolder).join('')}
+
${right.map(renderFolder).join('')}
+
`; + } el.innerHTML = html; }