Refine device traffic chart layout and styling

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.17.10',
-  gatewayClient: '0.18.10',
+  macClient: '0.17.12',
+  gatewayClient: '0.18.12',
   gatewayBackend: '0.18.1',
 });
 

src/web/styles.css

@@ -1270,6 +1270,10 @@ p {
   width: 112px;
   display: grid;
   gap: 2px;
+  border-radius: 4px;
+  background: color-mix(in oklch, var(--client-bg) 84%, transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
   visibility: hidden;
   pointer-events: none;
   transition: visibility 0s 420ms;
@@ -1373,20 +1377,19 @@ p {
 }
 
 .client-device-traffic-chart {
-  grid-column: 2 / 4;
+  grid-column: 1 / 4;
   grid-row: 2;
   height: var(--client-device-chart-height);
   position: relative;
   z-index: 4;
   display: grid;
-  grid-template-columns: 0 minmax(0, 1fr);
+  grid-template-columns: 34px minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr) 14px;
+  column-gap: 8px;
   overflow: visible;
 }
 
 .client-device.is-pinned .client-device-traffic-chart {
-  grid-template-columns: 52px minmax(0, 1fr);
-  column-gap: 5px;
   transform-origin: bottom center;
   animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -1421,7 +1424,7 @@ p {
 }
 
 .client-device-traffic-plot {
-  grid-column: 1 / -1;
+  grid-column: 2;
   grid-row: 1;
   height: 100%;
   min-height: 0;
@@ -1430,10 +1433,6 @@ p {
   cursor: crosshair;
 }
 
-.client-device.is-pinned .client-device-traffic-plot {
-  grid-column: 2;
-}
-
 .client-device-traffic-plot svg {
   width: 100%;
   height: 100%;
@@ -1496,7 +1495,7 @@ p {
 }
 
 .client-device-traffic-time {
-  grid-column: 1 / -1;
+  grid-column: 2;
   grid-row: 2;
   z-index: 2;
   display: flex;
@@ -1506,10 +1505,6 @@ p {
   line-height: 10px;
 }
 
-.client-device.is-pinned .client-device-traffic-time {
-  grid-column: 2;
-}
-
 .client-device-traffic-point-tooltip {
   position: fixed;
   z-index: 1002;

test/web/device-inventory-contract.test.js

@@ -111,9 +111,11 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/);
   assert.match(styles, /\.client-device-traffic-total,[\s\S]*\.client-device-traffic-breakdown > span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/);
   assert.match(styles, /\.client-device-traffic-breakdown > span \{[\s\S]*translateY\(-12px\)[\s\S]*\.client-device-traffic:hover \.client-device-traffic-breakdown > span,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/);
-  assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*background:|\.client-device-traffic-breakdown \{[^}]*box-shadow:/);
-  assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 2 \/ 4;[\s\S]*grid-row: 2/);
-  assert.match(styles, /\.client-device\.is-pinned \.client-device-traffic-chart \{[\s\S]*grid-template-columns: 52px minmax\(0, 1fr\)/);
+  assert.match(styles, /\.client-device-traffic-breakdown \{[^}]*background: color-mix\(in oklch, var\(--client-bg\) 84%, transparent\);[^}]*backdrop-filter: blur\(8px\)/);
+  assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*box-shadow:/);
+  assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 1 \/ 4;[\s\S]*grid-template-columns: 34px minmax\(0, 1fr\);[\s\S]*column-gap: 8px/);
+  assert.match(styles, /\.client-device-traffic-plot \{[\s\S]*grid-column: 2;/);
+  assert.match(styles, /\.client-device-traffic-time \{[\s\S]*grid-column: 2;/);
   assert.match(styles, /\.client-device-traffic-grid line \{[\s\S]*vector-effect: non-scaling-stroke/);
   assert.match(styles, /\.client-device-traffic-lines polyline,[\s\S]*stroke-width: 1\.8/);
   assert.match(styles, /\.client-device-traffic-axis > \.is-max \{[\s\S]*top: var\(--traffic-chart-top\)/);