Refine device traffic chart layout and styling

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;