Mobile Friendly CMDB

Mobile: CMDB

LAYER 30 · shipped as #1448–#1449 · the sixteenth module

Five pages: browse, an object's page, data quality, settings and the guide.

The short version: most of this module was already fit for a phone, and the work that mattered was on one page. That is a first, and it is the interesting part of the round — along with a fault that no containment check in the toolkit could have found, and a second that no measurement of any kind could have found.

---

1. What was already right

Worth stating plainly, because every previous round opened with a list of breakages.

The object page carries its own @media (hover: none) rules, so the unlink and cog controls are not hover-gated on touch. That is §26 — a lesson this rollout learned the hard way on Contracts — applied by whoever built the page rather than retrofitted here. It also has its own max-width: 900px block that stacks the connection columns, wraps the hero and puts the hero actions on their own row.

Data quality and the guide needed nothing at all beyond the shared shell. Settings needed nothing beyond data-mobile-page="settings", which is the whole point of having a shared settings layer.

So: opt five pages in, fix one page, fix one sentence.

---

2. 🔴 The fault the containment check could not see

cmdb/index.php sets body { overflow: hidden }.

That single declaration makes the standard containment assertion — docScrollW === innerWidth — structurally incapable of failing. Nothing can overflow a document that clips. The browse page reported clean at 360px on every run while being unusable, and it would have reported clean whatever was on it.

What found it was measuring the panes instead of the document:

.browse-container   x=0    w=360
.browse-sidebar     x=0    w=260
.browse-main        x=260  w=100   <- the object list
.main-header        x=260  w=100
.object-list        x=260  w=100

A 260px sidebar on a 360px screen takes 72% of it and leaves 100px for the thing you opened the page to look at. This is the same fault as the Forms approvals sidebar in LAYER 27, reached by a completely different route: there the content was squeezed, here it was squeezed and the page was clipping, so even the squeeze produced no overflow to detect.

The generalisation is in §30. §28 asked "can you reach the bottom?"; this is its horizontal twin — a page whose body clips cannot report an overflow, so measure the panes, not the document.

The fix: the sidebar becomes a chip strip

The same answer Contracts reached for its own 260px sidebar. A class list is short, flat and mutually exclusive, which is exactly what a chip row is for:

[data-mobile-page="cmdb-browse"] .browse-container { flex-direction: column; }
[data-mobile-page="cmdb-browse"] .browse-sidebar   { width: auto; flex: 0 0 auto; }
[data-mobile-page="cmdb-browse"] .browse-sidebar .class-list {
    flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain;
}
[data-mobile-page="cmdb-browse"] .class-item { flex: 0 0 auto; border-radius: 999px; min-height: 40px; }

⭐ One thing worth knowing about turning a list row into a pill. .class-item is justify-content: space-between on desktop, which is right in a 260px column — name left, count right. Inside a pill only as wide as its content, "space between" has no space to work with and the two ends collide. Centre them and let a gap do the spacing.

The .browse-main pane then needs min-width: 0 to take the width back, which is §14 — a flex item will not shrink below its content without it — and the search box needs flex: 1 1 60%, the middle value from §23: auto lets its 240px width win and pushes New off the edge, 0 collapses it to its own padding.

---

3. 🔴 The fault no measurement could have found

With the class list moved to the top, the empty state still read:

Pick a class on the left to see its objects.

There is no longer a left.

A sentence that points the wrong way is exactly as wide as one that points the right way. Every containment check, every pane measurement, every font-size assertion passed. It took a screenshot, which is the third round running where looking at the page found something measuring it could not.

And the fix a screenshot corrected twice

The obvious repair was to swap in a direction-free wording. cmdb.list.select_class — "Select a class" — already exists, is already translated in all 25 locales, and needed no new string. That is the harvest-don't-invent rule and it looked ideal.

The next screenshot showed the same three words twice, one directly under the other: the panel heading above the empty state already says "Select a class".

So the answer was smaller than either attempt — say it once, at the top, and drop the line entirely on a phone, keeping the hint underneath that actually adds something ("If you don't have any classes yet, head to Settings → Classes first"). Less markup than the fix that came before it.

⚠️ The heading is hidden by the mobile layer, not by the page. The reverse — a mobile-only variant hidden in the page's own CSS — is the §25 pattern and would have been right if a variant were needed. Here nothing is revealed, only suppressed, so the rule belongs in the layer.

---

4. What was deliberately left alone

The object page's stat tiles stay two-up. Its own 900px rule sets repeat(2, 1fr), which measures 146px a tile at 360px. That is comfortably readable, and a status strip exists to be scanned — density beats card size, the lesson Service Status taught. It is recorded in the layer so the next sweep does not "fix" it into a column of four.

The settings tables scroll sideways rather than becoming card feeds, which is what the shared settings layer does for every module and for a good reason: these are config tables with unlabelled booleans in them, and reading order cannot carry seven columns.

---

5. 📁 Files

File	What changed
assets/css/mobile.css	LAYER 30 (30a browse chip strip, 30b the main pane, 30c the typed fields, 30c-ii the empty state, 30d a note on the stat tiles)
cmdb/index.php	opt-in ×3 parts, and a class on the empty-state heading
cmdb/object.php · cmdb/audit.php · cmdb/help.php	opt-in only
cmdb/settings/index.php	opt-in ×4 parts — including data-mobile-page="settings"
86 other pages	mobile.css?v=127 / mobile.js?v=50

---

6. How it was verified

Four probes, at 360×740 and again at 1280×900, driving the real pages in a forged session.

Three of the four faults the probes reported were the probes' own. That is worth recording as plainly as the real ones:

Reported	Actually
"module nav OFF-SCREEN AND NO HAMBURGER" on all five	the injected button is .mobile-views-btn; the probe guessed at .hamburger / .nav-toggle
"STILL OFF-SCREEN AFTER TAP" on all five	headless Chrome on a virtual-time budget does not advance CSS transitions — the drawer was frozen at frame 0, not broken. Killing transitions in the frame first showed translateX(0), visible, on screen
"TABLE 962/324 OVERFLOWS" on settings	the settings layer makes the table itself the scroller; the check asked only about its parent
.mobile-views-overlay "visible" on desktop, and .class-list "a ROW on desktop"	a zero-height div, and flex-direction: row being the initial value on an element that is not a flex container

Each cost a round of diagnosis. The guide already says suspect the probe when it reports a fault on code that has had a device pass; the corollary this round adds is that a new probe should be distrusted on its first red result, not its tenth.

The desktop audit ran with two known-good shipped pages as controls (LMS and Contracts). Without them "desktop unchanged" on five CMDB pages proves only that the assertions are lenient.

assets/css/mobile.css is a single @media (max-width: 768px) block, opening at line 14 and closing at 8966; LAYER 30 lands at 8807–8965, inside it, so it cannot reach desktop by construction. Confirmed anyway at 1280px: the sidebar is still 260px, the search box still 13px, the nav still a bar and not a drawer.

An audit of the other 86 changed files confirmed every one of them changed only its cache-buster and nothing else.

---

7. Related

• Mobile-Friendly — strategy, and the one hard rule
• Mobile-Friendly: Techniques — §30 came out of this round
• Mobile: Contracts — the chip-strip precedent
• Mobile: Forms — the sidebar-squeeze fault, reached another way
• CMDB — what the module does