Refine device traffic display and sorting

src/web/components/DevicesPanel.jsx

@@ -275,15 +275,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const saving = savingId === device.id;
             const seen = formatLastSeen(device.lastSeenAt);
             const online = device.status === 'online';
-            const download = formatByteString(device.downloadBytes);
-            const upload = formatByteString(device.uploadBytes);
-            const proxyDownload = formatByteString(device.proxyDownloadBytes);
-            const proxyUpload = formatByteString(device.proxyUploadBytes);
             const gatewayTotal = byteString(device.downloadBytes) + byteString(device.uploadBytes);
             const proxyTotal = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
             const gatewayTraffic = formatByteString(gatewayTotal.toString());
             const proxyTraffic = formatByteString(proxyTotal.toString());
-            const trafficLabel = `Gateway: получено ${download}, отдано ${upload}. Прокси: получено ${proxyDownload}, отдано ${proxyUpload}`;
             const copied = copyFeedback?.id === device.id;
             const policyBusy = device.policyStatus === 'applying';
             const policyFailed = device.policyStatus === 'failed';
@@ -344,7 +339,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     <button type="button" aria-label="Отменить изменение" disabled={saving} onClick={() => setEditingId('')}>×</button>
                   </form>
                 ) : (
-                  <div className="client-device-title">
+                  <>
                     {device.ip ? <h3 className="client-device-name-heading">
                       <button
                         className={`client-device-name${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
@@ -375,7 +370,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                       </button>
                       <Tooltip>Изменить название</Tooltip>
                     </span>
-                  </div>
+                  </>
                 )}
                 <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex="0">
                   <time
@@ -387,16 +382,11 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 </span>
               </div>
 
-              <span
-                className="client-device-traffic client-tooltip-anchor"
-                tabIndex="0"
-                aria-label={trafficLabel}
-              >
+              <span className="client-device-traffic" role="group" aria-label={`Gateway ${gatewayTraffic}, Прокси ${proxyTraffic}`}>
                 <span className="client-device-traffic-sources" aria-hidden="true">
                   <span><b>Gateway</b><strong>{gatewayTraffic}</strong></span>
                   <span className="is-proxy"><b>Прокси</b><strong>{proxyTraffic}</strong></span>
                 </span>
-                <Tooltip>{trafficLabel}</Tooltip>
               </span>
 
               <span className="client-device-policy-wrap client-tooltip-anchor">