Refine device inventory layout and traffic chart styling

src/web/components/DevicesPanel.jsx

@@ -479,7 +479,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     dateTime={device.lastSeenAt}
                     aria-label={`${online ? 'В сети' : 'Не в сети'}. Последний контакт: ${seen.tooltip}`}
                   >
-                    {online ? 'В сети' : <TextMorph from={seen.label} to={seen.relative} />}
+                    {online ? 'В сети' : <TextMorph from="Не в сети" to={seen.relative} />}
                   </time>
                 </span>
               </div>

src/web/styles.css

@@ -936,28 +936,30 @@ p {
   grid-column: 2;
   grid-row: 1;
   height: 34px;
+  position: relative;
   min-width: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: 8px;
+  padding-top: 11px;
 }
 
 .client-device-main > h3 {
-  height: 32px;
+  height: 23px;
   flex: 0 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
   overflow: hidden;
   margin: 0;
-  font-size: 15px;
+  font-size: 14px;
   letter-spacing: -0.03em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .client-device-name {
-  height: 32px;
+  height: 23px;
   width: 100%;
   min-width: 0;
   display: grid;
@@ -967,12 +969,16 @@ p {
   border: 0;
   background: transparent;
   color: var(--client-text);
-  font: 700 15px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   letter-spacing: -0.03em;
   text-align: left;
   cursor: copy;
 }
 
+.client-device-name-ip {
+  font-size: 12px;
+}
+
 .client-device-name > span {
   grid-area: 1 / 1;
   overflow: hidden;
@@ -1051,6 +1057,8 @@ p {
 
 .client-device-edit-wrap {
   flex: 0 0 auto;
+  height: 23px;
+  align-self: flex-end;
   opacity: 0.34;
   transition: opacity 180ms ease;
 }
@@ -1076,6 +1084,11 @@ p {
   color: var(--client-muted);
 }
 
+.client-device-edit {
+  width: 26px;
+  height: 23px;
+}
+
 .client-device-edit svg,
 .client-device-pin svg {
   width: 17px;
@@ -1120,14 +1133,16 @@ p {
 }
 
 .client-device-last-seen {
-  height: 32px;
-  flex: 0 1 auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 10px;
   min-width: 0;
   display: flex;
   align-items: center;
-  max-width: 116px;
+  max-width: 150px;
   overflow: hidden;
-  font-size: 10px;
+  font-size: 8.5px;
   text-overflow: ellipsis;
   color: var(--client-text);
   cursor: default;
@@ -1163,7 +1178,7 @@ p {
 .client-text-morph-anchor,
 .client-text-morph-value {
   grid-area: 1 / 1;
-  justify-self: end;
+  justify-self: start;
   white-space: nowrap;
 }
 
@@ -1175,7 +1190,7 @@ p {
   will-change: opacity, filter, transform;
   filter: blur(0);
   transform: translateY(0) scale(1);
-  transform-origin: right center;
+  transform-origin: left center;
   transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -1211,7 +1226,7 @@ p {
   width: 112px;
   height: 34px;
   position: relative;
-  z-index: 3;
+  z-index: 6;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
 }
@@ -1331,7 +1346,7 @@ p {
 }
 
 .client-device-traffic-chart {
-  grid-column: 2 / 3;
+  grid-column: 2 / 4;
   grid-row: 2;
   height: 42px;
   position: relative;
@@ -1339,6 +1354,10 @@ p {
   overflow: visible;
 }
 
+.client-device-traffic-chart:has(.client-device-traffic-bar:hover) {
+  z-index: 7;
+}
+
 .client-device-traffic-chart::after {
   position: absolute;
   right: 0;
@@ -1355,7 +1374,7 @@ p {
   display: grid;
   grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
   align-items: flex-end;
-  gap: 1px;
+  gap: 0;
   animation: client-device-traffic-shift 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -1365,6 +1384,10 @@ p {
   cursor: help;
 }
 
+.client-device-traffic-bar:hover {
+  z-index: 10;
+}
+
 .client-device-traffic-time {
   position: absolute;
   right: 2px;
@@ -1381,10 +1404,10 @@ p {
 
 .client-device-traffic-bar-fill {
   position: absolute;
-  inset: 0;
+  inset: 0 -2px;
   display: flex;
   overflow: hidden;
-  border-radius: 2px 2px 0 0;
+  border-radius: 3px 3px 0 0;
   flex-direction: column-reverse;
 }