Fix role fit-and-finish: Desktop-only router note, narrow-viewport layout

Systems Operational on roles with no enabled domain services (a
fresh Desktop-only install, or everything turned off) rendered no
Router card but still showed a "Who uses these ports" note listing
services the machine does not have. Any role with no enabled domain
service now gets the calm "No router setup needed yet" card with
role-appropriate wording, and the who-uses note only appears when
a domain service is actually enabled.

Narrow viewports (phones, half-screen RDP) had no layout at all:
the sidebar and topbar forced ~900px of horizontal scroll on every
role. The sidebar now collapses to a 76px icon rail below 920px,
the topbar wraps its search onto a second row below 640px, and the
welcome column reflows to one card per row. Legacy pre-redesign
media rules in onboarding.css (which targeted the old DOM and set
.sidebar{width:100%}) are removed — they silently overrode the new
layout, and one shrank the Zeus QR to 200px; QR codes keep their
repo-original 240px at every width.

app/sovran_systemsos_web/static/css/layout.css

@@ -634,3 +634,42 @@
   font-size: 0.85rem;
   margin-bottom: 24px;
 }
+
+/* ── Narrow viewports (phone / half-screen RDP) ──────────────────── */
+/* The sidebar becomes an icon rail so the content keeps room, and the
+   topbar wraps its search onto a second row instead of overflowing. */
+@media (max-width: 920px) {
+  .sidebar {
+    width: 76px;
+    padding: 16px 8px 12px;
+  }
+
+  .brand { justify-content: center; padding: 2px 0 18px; gap: 0; }
+  .brand-text,
+  .nav-label,
+  .nav-text,
+  .nav-count,
+  .sidebar-support-text,
+  .sidebar-divider,
+  #sidebar-features { display: none; }
+
+  .nav-item { justify-content: center; gap: 0; padding: 10px 0; }
+  .sidebar-support-btn { justify-content: center; gap: 0; padding: 10px 0; }
+
+  .content { padding: 18px 18px 40px; }
+
+  /* keep the welcome background full-bleed against the new padding */
+  .welcome {
+    margin: -18px -18px -40px;
+    padding: 48px 20px 40px;
+    min-height: calc(100% + 58px);
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
+  .search-box { order: 5; flex-basis: 100%; }
+
+  .welcome { padding: 40px 16px 36px; }
+  .welcome-cards { grid-template-columns: 1fr; }
+}