Mobile Friendly Software

Mobile: Software

Software is the ninth module made mobile‑friendly, after Tickets, Assets, Calendar, Knowledge, Service Status, Watchtower, Problem Management and Change Management. Same hard rule: one @media (max-width: 768px) block, desktop byte‑identical.

🧰 Code‑level catalogue of the techniques: Mobile: Techniques & Tricks.

Shipped as #1194, commit 32a2e428. LAYER 24.

---

The starting point

viewport = 360   docScrollW = 1119   ← on ALL SIX pages, identically

The same 1119 everywhere is itself the diagnosis: the cause cannot be in any one page. It was .header-right in the shared header row — the iOS reflow‑to‑desktop trap — and the module had simply never opted in. Three tags per page took all six to docScrollW === 360.

---

Scope — six pages, three of them free

Page	State
software/ — the inventory	Done — toolbar stacked, filter tabs swipe; the table itself needed nothing
software/licences/	Done — toolbar stacked, table → card feed (24a, 24c)
software/dashboard/	Done by opting in — .dashboard-page + .widget-grid from the Assets round
software/dashboard/library.php	Done — toolbar wrapped, table → card feed (24d)
software/settings/	Done by opting in, plus 30px of padding trimmed (24e)
software/help.php	Done by opting in — inherits 16h

🔑 Three of six cost nothing, and the third one is the interesting case.

---

🔑 The inventory table was already finished

.software-table is not Software's class. Asset Management's Software tab uses the same name for the same kind of table, and LAYER 15a gave it a card feed — with a bare selector. So the moment this page was opted in, its 1555‑row inventory picked up a finished, device‑tested layout.

This is §15 in its positive form. Two modules sharing a class name is usually a hazard; here it meant the work was already done.

🔴 …and I wrote a second one anyway, off a misread measurement

Application Name  324 x 20   "001 Taxis"
Publisher          13 x 17   "—"
Installed On       34 x 17   "1"

I read "Publisher squeezed to 13px" and built a card feed to fix it. That was the card feed, working. 324px is the heading cell at display: block; 13px is the width of the text — in a cell already switched to display: inline.

⭐ The signature of a card feed is cells of wildly unequal width AND height. A real table row shares one height across every cell — 43px here, as the desktop control shows. Three cells 20, 17 and 17px tall are not a table at all.

The duplicate was deleted. It would have out‑specified the shared rule and quietly forked the two modules' appearance.

The one thing 15a never needed and this page does: the loading spinner and empty state are a single colspan cell, which is also :first-child and so was being drawn as the card's heading.

---

What actually needed doing

24a — a search box that is 350px wide on a 360px screen

.search-box { width: 350px; }   /* the module's own stylesheet */

.toolbar-right ran to 465px on the inventory and 561px on licences. Both toolbars stack, the search boxes go full width at 16px (anti‑zoom), and the inventory's three filter tabs become a swipe strip.

Scoped to this module's own containers: .search-box and .toolbar-right are names Asset Management, Contracts, Forms and Process Mapper also use.

24c — licences, and the one value that needed a label

Six columns, every row 76px tall. As a card feed, five of the six values are self‑describing — a type badge, a date, a status pill, a cost. Only the quantity is ambiguous as a bare 15.

.licence-table tbody td:nth-child(3)::before { content: '\00d7 '; }

It joins the type badge as "Subscription × 15". × is a symbol rather than a word, so unlike a CSS‑generated text label it needs no translation — which is the usual reason this module's card feeds carry no column labels at all.

Adobe Creative Cloud
Adobe Inc.
[Subscription] ×15 · 23 Jul 2026 · [Active] · £7560.00

24d — the widget library, and a scope that names the structure

Rows were 158px tall — the worst crush in the module.

Scoped to .library-container .widget-table rather than to Software, because Asset Management and Tickets carry the same page with the same two class names. Naming the structure means those two inherit it the day they are opted in; neither is today, so neither can see it now.

24e — the settings shell

The table was already scrolling correctly: the deliberately blunt body[data-mobile-page="settings"] table rule catches any table on a settings page. But the shared shell rule keys on .container, and this page (like Morning Checks) uses .settings-container — so it kept 30px of desktop side padding, leaving the table a 264px window. Now 296px.

---

⚠️ The one my own probe excused

.library-toolbar-right ran to 527px, turning .dashboard-page into a 527px sideways scroller. The sweep reported zero genuine spills on that page.

The probe was working as written: it ignores anything with a scrolling ancestor, which is the false‑positive filter added in Change Management Round 1. But here the ancestor scrolls by accident, not by design — .dashboard-page sets only overflow-y: auto, and per spec that computes overflow-x to auto as well (§12), exactly as .changes-main did.

A screenshot found it. No measurement did.

🔑 A filter that suppresses false positives will eventually suppress a true one. The two are only distinguishable by whether the scrolling was intended — and that is a question about the CSS, not about the numbers. Where a page has an accidental scroller, "an ancestor scrolls" means "the bug is hidden", not "there is no bug".

---

Verification

Check	Result
docScrollW === innerWidth at 360px	✅ all six pages — 1119 → 360
Elements past the viewport	✅ zero, except the two intentional scrollers (inventory filter tabs 450, settings table 1010)
Accidental sideways scrollers	✅ none — .dashboard-page 527 → contained
Licence table	635 → 352px, rows 76 → 35 + one meta line
Widget table	643 → 312px, rows 158 → 35 + meta + an action row
Settings table window	264 → 296px, still scrolling sideways with its header
Desktop @ 1400px	every table table / table-header-group / table-row; toolbars still row at 15px 20px; search boxes still 350/240px at 13–14px; settings still 30px
Looked at, not only measured	✅ five pages — and it is the only thing that caught the library toolbar

---

Known rough edges

• An unknown publisher reads as — · 1 on the inventory card. The — is the module's own placeholder and the treatment is inherited from Asset Management, so changing it would change both modules for a cosmetic gain. Left alone deliberately.
• The inventory is 1555 rows on a phone. The filter tabs and the search box are the answer to that; an infinite‑scroll or grouped view would be a feature, not a mobile fix.
• Asset Management's and Tickets' widget libraries are not opted in. They will inherit 24d's card feed and toolbar the day they are.

---

Reference

• Mobile‑Friendly — the overview and the rollout state
• Mobile: Techniques & Tricks — the code‑level catalogue
• Mobile: Assets — the round that had already built this module's biggest table
• Software — the module itself