Polish diagnostics animations and device alias sizing

src/web/components/DevicesPanel.jsx

@@ -211,7 +211,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const movementAnimations = useRef(new Map());
   const previousTraffic = useRef(new Map());
   const aliasBaseline = useRef({ id: '', value: '' });
-  const aliasWidth = useRef('1px');
   const copyTimer = useRef(null);
   const trafficDeltaTimer = useRef(null);
   const trafficOrder = useRef({ direction: sortDirection, ids: [] });
@@ -411,10 +410,9 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     copyTimer.current = setTimeout(() => setCopyFeedback(null), COPY_FEEDBACK_MS);
   }
 
-  function startEditing(device, width = 1) {
+  function startEditing(device) {
     const value = device.alias || device.hostname || '';
     aliasBaseline.current = { id: device.id, value };
-    aliasWidth.current = `${width}px`;
     setEditingId(device.id);
     setAlias(value);
   }
@@ -584,7 +582,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     <input
                       className="client-device-alias-input"
                       value={alias}
-                      style={{ '--alias-width': aliasWidth.current }}
+                      style={{ '--alias-width': `${Math.max(1, alias.length)}ch` }}
                       maxLength="64"
                       autoFocus
                       aria-label="Название устройства"
@@ -600,7 +598,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     className="client-device-alias-trigger"
                     type="button"
                     aria-label={`Изменить название ${title}`}
-                    onClick={(event) => startEditing(device, event.currentTarget.getBoundingClientRect().width)}
+                    onClick={() => startEditing(device)}
                   >{title}</button>}
                   {(hasName || (editing && Boolean(alias))) && device.ip && <span className="client-device-name-separator" aria-hidden="true">·</span>}
                   {device.ip ? <button