Track proxy traffic separately in device inventory

src/web/styles.css

@@ -1071,8 +1071,12 @@ p {
 }
 
 .client-device-traffic {
+  display: block;
+  max-width: min(240px, 42vw);
+  overflow: hidden;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -1081,6 +1085,44 @@ p {
   font-size: 9px;
 }
 
+.client-device-traffic-sources {
+  display: flex;
+  gap: 5px;
+  overflow: hidden;
+}
+
+.client-device-traffic-sources span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.client-device-traffic-sources span + span::before {
+  margin-right: 5px;
+  color: var(--client-muted);
+  content: '·';
+}
+
+.client-device-traffic-sources .is-proxy {
+  color: var(--client-accent);
+}
+
+.client-device-traffic:focus-visible {
+  border-radius: 3px;
+  outline: 2px solid var(--client-accent);
+  outline-offset: 3px;
+}
+
+.client-device-traffic.client-tooltip-anchor > .client-tooltip {
+  right: 0;
+  left: auto;
+  transform: translate(0, 2px);
+}
+
+.client-device-traffic.client-tooltip-anchor:hover > .client-tooltip,
+.client-device-traffic.client-tooltip-anchor:focus-visible > .client-tooltip {
+  transform: translate(0, 0);
+}
+
 .client-device-policy-wrap {
   width: 72px;
   position: relative;