diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js index 1442a62..5ea7e99 100644 --- a/muxplex/frontend/app.js +++ b/muxplex/frontend/app.js @@ -463,7 +463,7 @@ function buildTileHTML(session, index, mobile) { const escapedName = escapeHtml(name); const timeStr = formatTimestamp(session.last_activity_at || null); - // Device badge — right-aligned in header, separate from name span + // Device badge — shown inside tile-meta, before timestamp with · separator // Shown when multiple sources configured AND session has a device name let badgeHtml = ''; if (_serverSettings && _serverSettings.multi_device_enabled && session.deviceName && ds.showDeviceBadges !== false) { diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css index 98a81e8..746d789 100644 --- a/muxplex/frontend/style.css +++ b/muxplex/frontend/style.css @@ -225,17 +225,13 @@ body { color: var(--text-muted); white-space: nowrap; margin-left: 8px; + transition: opacity 150ms ease; /* × crossfade with badge + timestamp on hover */ } .tile-meta-sep { margin: 0 2px; } -/* × crossfade with badge + timestamp on hover */ -.tile-meta { - transition: opacity 150ms ease; -} - .session-tile:hover .tile-meta, .session-tile:focus-within .tile-meta { opacity: 0; diff --git a/muxplex/frontend/tests/test_app.mjs b/muxplex/frontend/tests/test_app.mjs index d9dc757..f481293 100644 --- a/muxplex/frontend/tests/test_app.mjs +++ b/muxplex/frontend/tests/test_app.mjs @@ -2522,6 +2522,9 @@ test('buildTileHTML places device-badge inside tile-meta span', () => { const session = { name: 'work', deviceName: 'Laptop', sessionKey: '::work', snapshot: '' }; const html = app.buildTileHTML(session, 0, false); const tileMetaStart = html.indexOf(''); + // Note: finds the first after tileMetaStart, which is device-badge's closing tag + // (not tile-meta's own close), but the assertion still holds because device-badge + // opens and closes before tile-time within the tile-meta container. const tileMetaEnd = html.indexOf('', tileMetaStart); assert.ok(tileMetaStart !== -1, 'tile-meta span should exist'); const deviceBadgePos = html.indexOf('device-badge');