chore: consolidate platform split checks

webui/src/styles/tables.css

@@ -178,6 +178,20 @@
   border-radius: 0;
 }
 
+.card-body > .connection-tree:only-child {
+  margin: -22px -24px;
+  width: calc(100% + 48px);
+  border: 0;
+  border-radius: 0;
+}
+
+.card-body > .loading-frame:only-child > .connection-tree:only-child {
+  margin: -22px -24px;
+  width: calc(100% + 48px);
+  border: 0;
+  border-radius: 0;
+}
+
 .data-grid-container {
   height: 100%;
 }
@@ -238,6 +252,15 @@
   gap: 8px;
 }
 
+.ui-compact-tables .data-grid-cell {
+  padding: 7px 10px;
+  gap: 6px;
+}
+
+.ui-compact-tables .data-grid-header-cell {
+  font-size: 11px;
+}
+
 .data-grid-cell:last-child {
   border-right: 0;
 }
@@ -736,3 +759,124 @@
     width: 100%;
   }
 }
+
+/* Reusable two-level connection/credential tree. */
+.connection-tree {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.connection-tree-header,
+.connection-tree-row {
+  display: grid;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.connection-tree-header {
+  min-height: 40px;
+  border-bottom: 1px solid var(--line-dark);
+  background: var(--bar);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.connection-tree-row {
+  min-height: 58px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.connection-tree-row:last-child {
+  border-bottom: 0;
+}
+
+.connection-tree-row.is-child {
+  background: var(--panel-soft);
+}
+
+.connection-tree-cell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 10px 12px;
+  border-right: 1px solid var(--line);
+}
+
+.connection-tree-cell:last-child {
+  border-right: 0;
+}
+
+.connection-tree-primary-cell {
+  font-weight: 700;
+}
+
+.connection-tree-primary-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  padding-left: calc(var(--connection-tree-depth, 0) * 22px);
+}
+
+.connection-tree-cell.align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.connection-tree-cell.align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.connection-tree-cell > * {
+  min-width: 0;
+}
+
+.connection-tree-actions {
+  min-width: 0;
+}
+
+.connection-tree-empty {
+  padding: 18px;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.connection-tree-main {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.connection-tree-main strong,
+.connection-tree-main small,
+.connection-tree-muted-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connection-tree-main small,
+.connection-tree-muted-line {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+@media (max-width: 820px) {
+  .connection-tree {
+    overflow-x: auto;
+  }
+
+  .connection-tree-header,
+  .connection-tree-row {
+    min-width: 760px;
+  }
+}