Refine device traffic reset control

src/shared/versions.ts

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.25.6',
-  gatewayClient: '0.26.5',
+  macClient: '0.25.7',
+  gatewayClient: '0.26.6',
   gatewayBackend: '0.26.5',
 });
 

src/web/features/devices/DevicesPanel.tsx

@@ -339,17 +339,20 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
               <button type="button" aria-pressed={trafficScale === 'linear'} onClick={() => setTrafficScale('linear')}>Лин</button>
               <button type="button" aria-pressed={trafficScale === 'log'} onClick={() => setTrafficScale('log')}>Лог</button>
             </span>
-            <button
-              className="client-devices-reset"
-              type="button"
-              disabled={!snapshot || resetting}
-              onClick={requestTrafficReset}
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M4 12a8 8 0 1 0 2.3-5.7M4 5v7h7" />
-              </svg>
-              <span>Сбросить данные</span>
-            </button>
+            <span className="client-devices-reset-wrap client-tooltip-anchor">
+              <button
+                className="client-devices-reset"
+                type="button"
+                aria-label="Сбросить вход и выход всех устройств"
+                disabled={!snapshot || resetting}
+                onClick={requestTrafficReset}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M4 12a8 8 0 1 0 2.3-5.7M4 5v7h7" />
+                </svg>
+              </button>
+              <Tooltip>Сбросить вход и выход всех устройств</Tooltip>
+            </span>
           </div>
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">

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;