make the fleet table fit the screen, not the scrollbar (v0.4.77)

Full width alone was not enough: the default cell padding is 1rem a side, which
is 2rem per column and ~384px of pure padding across twelve columns -- by
itself enough to push the table into a horizontal scroll on a 1280px laptop.
A `.table--dense` class takes that to .4rem/.5rem.

And one column was carrying nothing: "Pool" rendered "spot" or "on-demand",
which the GPU cell already marks with "(spot)", while the pool's identity is in
the Model column (a shared pool's rows carry the pool key there). Dropping it
takes the table from twelve columns to eleven.

Measured budget: ~1458px of content+padding before, ~1165px after, against a
1232px viewport once the page gutters are taken off -- so it now fits a 1280px
screen instead of needing 1500px.
Co-Authored-By: 's avatarClaude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S8LAP3ueNzQJtwzhgVbq66
parent c22819c2
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
# Canonical product version for CoderAI — single source of truth. Both the API # Canonical product version for CoderAI — single source of truth. Both the API
# metadata and the admin web UI read from here. # metadata and the admin web UI read from here.
__version__ = "0.4.76" __version__ = "0.4.77"
__tagline__ = "Complete orchestration, distribution and escalation of remotizable advanced inference." __tagline__ = "Complete orchestration, distribution and escalation of remotizable advanced inference."
# Configure the CUDA caching allocator BEFORE torch is imported anywhere. # Configure the CUDA caching allocator BEFORE torch is imported anywhere.
......
...@@ -172,6 +172,12 @@ tbody tr:last-child td{border-bottom:none} ...@@ -172,6 +172,12 @@ tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.015);color:var(--text)} tbody tr:hover td{background:rgba(255,255,255,.015);color:var(--text)}
.td-name{font-weight:600;color:var(--text) !important} .td-name{font-weight:600;color:var(--text) !important}
td code{font-family:var(--mono);font-size:11.5px;background:var(--raised);padding:.1rem .35rem;border-radius:3px} td code{font-family:var(--mono);font-size:11.5px;background:var(--raised);padding:.1rem .35rem;border-radius:3px}
/* A wide table of live state, not a reading column: the default 1rem of
horizontal cell padding costs 2rem per column, which is ~384px of pure
padding across the twelve columns of the RunPod fleet table -- enough on
its own to push it into a horizontal scroll on a laptop. */
.table--dense th,.table--dense td{padding:.4rem .5rem}
.table--dense th:first-child,.table--dense td:first-child{padding-left:.15rem}
.empty-row td{text-align:center;padding:2.5rem;color:var(--text-3) !important} .empty-row td{text-align:center;padding:2.5rem;color:var(--text-3) !important}
/* ── Badges ──────────────────────────────────────────────────────── */ /* ── Badges ──────────────────────────────────────────────────────── */
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="card" style="margin-bottom:1rem"> <div class="card" style="margin-bottom:1rem">
<div class="card-title">Running pods</div> <div class="card-title">Running pods</div>
<div style="overflow-x:auto"> <div style="overflow-x:auto">
<table style="width:100%;border-collapse:collapse;font-size:13px"> <table class="table--dense" style="width:100%;border-collapse:collapse;font-size:13px">
<thead><tr style="text-align:left;color:var(--text-3);white-space:nowrap"> <thead><tr style="text-align:left;color:var(--text-3);white-space:nowrap">
<th>Model</th><th>GPU</th><th>Load</th><th>Memory</th><th>Pool</th><th>In-flight</th><th>Served</th><th>$/hr</th><th>Uptime</th><th>Cost so far</th><th>Health</th><th>Logs</th> <th>Model</th><th>GPU</th><th>Load</th><th>Memory</th><th>In flight</th><th>Served</th><th>$/hr</th><th>Uptime</th><th>Cost</th><th>Health</th><th>Logs</th>
</tr></thead> </tr></thead>
<tbody id="rp-pods"><tr><td colspan="12" class="dim">No pods running.</td></tr></tbody> <tbody id="rp-pods"><tr><td colspan="11" class="dim">No pods running.</td></tr></tbody>
</table> </table>
</div> </div>
</div> </div>
...@@ -169,14 +169,13 @@ async function rpRefresh(){ ...@@ -169,14 +169,13 @@ async function rpRefresh(){
// pods table // pods table
const tb = document.getElementById('rp-pods'); const tb = document.getElementById('rp-pods');
if(!pods.length){ tb.innerHTML = '<tr><td colspan="12" class="dim">No pods running.</td></tr>'; } if(!pods.length){ tb.innerHTML = '<tr><td colspan="11" class="dim">No pods running.</td></tr>'; }
else { else {
tb.innerHTML = pods.map(p => `<tr> tb.innerHTML = pods.map(p => `<tr>
<td>${p.model||''}</td> <td>${p.model||''}</td>
<td>${p.gpu||''}${p.is_spot?' <span class="dim">(spot)</span>':''}</td> <td>${p.gpu||''}${p.is_spot?' <span class="dim">(spot)</span>':''}</td>
<td>${_loadCell(p)}</td> <td>${_loadCell(p)}</td>
<td>${_memCell(p)}</td> <td>${_memCell(p)}</td>
<td>${p.is_spot?'spot':'on-demand'}</td>
<td>${p.inflight||0}</td> <td>${p.inflight||0}</td>
<td>${_servedCell(p)}</td> <td>${_servedCell(p)}</td>
<td>${_usd(p.hourly_usd)}</td> <td>${_usd(p.hourly_usd)}</td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment