Refine device traffic display and sorting

src/web/styles.css

@@ -903,20 +903,9 @@ p {
   gap: 7px;
 }
 
-.client-device-title {
-  flex: 1 1 auto;
+.client-device-main > h3 {
+  flex: 0 1 auto;
   min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.client-device-title h3 {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.client-device-title h3 {
   overflow: hidden;
   margin: 0;
   font-size: 14px;
@@ -944,32 +933,23 @@ p {
   grid-area: 1 / 1;
   overflow: hidden;
   opacity: 1;
-  filter: blur(0);
   text-overflow: ellipsis;
   white-space: nowrap;
-  transform: translateY(0);
-  transition: opacity 220ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease;
 }
 
 .client-device-name-ip,
 .client-device-name-feedback {
   opacity: 0;
-  filter: blur(5px);
-  transform: translateY(2px);
 }
 
 .client-device-name:hover .client-device-name-primary,
 .client-device-name:focus-visible .client-device-name-primary {
   opacity: 0;
-  filter: blur(5px);
-  transform: translateY(-2px);
 }
 
 .client-device-name:hover .client-device-name-ip,
 .client-device-name:focus-visible .client-device-name-ip {
   opacity: 1;
-  filter: blur(0);
-  transform: translateY(0);
 }
 
 .client-device-name.is-copied .client-device-name-primary,
@@ -977,14 +957,11 @@ p {
 .client-device-name.is-copy-error .client-device-name-primary,
 .client-device-name.is-copy-error .client-device-name-ip {
   opacity: 0;
-  filter: blur(5px);
 }
 
 .client-device-name.is-copied .client-device-name-feedback,
 .client-device-name.is-copy-error .client-device-name-feedback {
   opacity: 1;
-  filter: blur(0);
-  transform: translateY(0);
 }
 
 .client-device-name.is-copied .client-device-name-feedback {
@@ -1198,23 +1175,6 @@ p {
   color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
 }
 
-.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: 32px;
   position: relative;
@@ -4272,7 +4232,6 @@ p {
   .client-device-pin svg,
   .client-device-policy,
   .client-device-policy svg,
-  .client-device-name > span,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,