# Mobile dashboard overflow and dense monitor UIs

Use this reference when a protected/static dashboard works on desktop but a phone browser clips controls, cards, charts, or data tables.

## Pattern from server monitor dashboard

A dense metrics dashboard had these mobile risks:

- Long range controls (`5 минут`, `12 часов`, `3 месяца`, etc.) in a nowrap horizontal strip.
- Six metric tiles originally optimized for desktop rows.
- Two-column chart grid with canvases.
- Process table containing long command lines.

The durable fix was CSS-only and did not require backend/service changes:

1. Add global horizontal containment: `html, body { max-width:100%; overflow-x:hidden; }`.
2. Use `minmax(0, 1fr)` for grid columns and `min-width:0` on flex/grid children.
3. Add an intermediate breakpoint for tablet widths before phone widths.
4. On phone widths, make range controls a visible grid (`repeat(3, minmax(0, 1fr))`) rather than a hidden horizontal scroller when the user says “everything should fit”.
5. Stack KPI tiles and chart cards into one column.
6. Keep canvases width-bound: `width:100%; max-width:100%; display:block` and reduce height on mobile.
7. Convert wide tables into stacked row cards on phones:
   - hide `thead`
   - make `table/tbody/tr/td` block-level
   - add `td::before` labels (`PID`, `User`, `RSS`, `CPU`, `Command`)
   - allow long command text to wrap with `overflow-wrap:anywhere; word-break:break-word`
8. Keep intentional desktop truncation with ellipses for long commands, but remove truncation on mobile cards.

## Verification recipe

Use a real browser plus an iframe matrix when the browser tool cannot directly resize the viewport:

```js
new Promise(resolve => {
  const widths = [320, 360, 375, 414, 768, 1024];
  const results = [];
  let i = 0;
  function next() {
    if (i >= widths.length) return resolve(results);
    const w = widths[i++];
    const f = document.createElement('iframe');
    f.src = '/path/?v=' + Date.now();
    f.style.cssText = `position:absolute;left:-9999px;top:0;width:${w}px;height:900px;border:0`;
    document.body.appendChild(f);
    f.onload = () => setTimeout(() => {
      const d = f.contentDocument.documentElement;
      const b = f.contentDocument.body;
      results.push({
        w,
        inner: f.contentWindow.innerWidth,
        doc: d.scrollWidth,
        body: b.scrollWidth,
        ok: d.scrollWidth <= f.contentWindow.innerWidth && b.scrollWidth <= f.contentWindow.innerWidth,
        ranges: getComputedStyle(f.contentDocument.querySelector('.ranges')).display,
        table: getComputedStyle(f.contentDocument.querySelector('table')).display,
      });
      f.remove();
      next();
    }, 800);
  }
  next();
});
```

Then do at least one visual pass with a visible 375px iframe/screenshot. Numeric overflow can pass while controls are still visually cramped or clipped vertically; visual inspection catches readability issues.

## Pitfalls

- Horizontal scrolling controls may technically avoid overflow but fail the product requirement when the user says “everything should fit.” Prefer wrapped/grid controls for small fixed option sets.
- `overflow-x:hidden` is not a fix by itself; use it only after making grids/flex children shrink correctly.
- Tables are the usual remaining mobile overflow source after cards/charts are fixed.
- Long process commands, URLs, hashes, and paths need explicit wrapping on mobile.