Refine device traffic reset control

src/web/styles/features/devices.css

@@ -21,7 +21,7 @@
 .client-devices-kicker {
   width: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 8px;
 }
@@ -67,20 +67,26 @@
   color: var(--client-accent);
 }
 
+.client-devices-reset-wrap {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  display: grid;
+  place-items: center;
+  margin-left: auto;
+}
+
 .client-devices-reset {
-  min-height: 28px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0 6px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  padding: 0;
   border: 0;
+  border-radius: 50%;
   background: transparent;
   color: oklch(0.68 0.15 28);
-  font: var(--type-label);
-  letter-spacing: var(--type-label-tracking);
-  text-transform: var(--type-label-transform);
   cursor: pointer;
-  white-space: nowrap;
   transition: color 220ms ease, filter 300ms ease;
 }
 
@@ -115,6 +121,17 @@
   opacity: 0.45;
 }
 
+.client-devices-reset-wrap > .client-tooltip {
+  right: 0;
+  left: auto;
+  transform: translate(0, 2px);
+}
+
+.client-devices-reset-wrap:hover > .client-tooltip,
+.client-devices-reset-wrap:has(> :focus-visible) > .client-tooltip {
+  transform: translate(0, 0);
+}
+
 .client-devices-sort {
   min-height: 28px;
   display: flex;