fix: mobile subagent dropdown — single-tap restore, position at top

- Move subagent dropdown to top (near badge) instead of bottom on mobile
- Fix iOS double-tap issue: wrap :hover styles in @media(hover:hover)
- Pin dropdown immediately on first tap (prevent mouseleave auto-close)
- Hide subagents panel by default on mobile (floating windows sufficient)
- Revert broken mobile auto-minimize (agents auto-pop up again)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-02-18 20:05:01 +01:00
co-authored by Claude Opus 4.6
parent 3bacc232b8
commit 989f8386b1
4 changed files with 50 additions and 21 deletions
+1 -1
View File
@@ -35,7 +35,7 @@ When user says "COM":
1. Increment version in BOTH `package.json` AND `CLAUDE.md` (verify they match with `grep version package.json && grep Version CLAUDE.md`)
2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web`
**Version**: 0.1543 (must match `package.json` for npm publish)
**Version**: 0.1544 (must match `package.json` for npm publish)
## Project Overview
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "claudeman",
"version": "0.1543",
"version": "0.1544",
"description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence",
"type": "module",
"main": "dist/index.js",
+16 -1
View File
@@ -4062,6 +4062,21 @@ class ClaudemanApp {
const dropdown = document.querySelector('.subagent-dropdown.open');
if (!dropdown) {
this.showSubagentDropdown(badgeEl);
// On mobile/touch, pin immediately so onmouseleave doesn't close it
const openedDropdown = document.querySelector('.subagent-dropdown.open');
if (openedDropdown) {
openedDropdown.classList.add('pinned');
const closeHandler = (e) => {
if (!badgeEl.contains(e.target) && !openedDropdown.contains(e.target)) {
openedDropdown.classList.remove('open', 'pinned');
if (openedDropdown._originalParent) {
openedDropdown._originalParent.appendChild(openedDropdown);
}
document.removeEventListener('click', closeHandler);
}
};
setTimeout(() => document.addEventListener('click', closeHandler), 0);
}
return;
}
dropdown.classList.toggle('pinned');
@@ -9766,7 +9781,7 @@ class ClaudemanApp {
showMonitor: false,
showProjectInsights: false,
showFileBrowser: false,
showSubagents: true,
showSubagents: false,
// Feature toggles - keep tracking on even on mobile
subagentTrackingEnabled: true,
subagentActiveTabOnly: true, // Only show subagents for active tab
+32 -18
View File
@@ -4224,9 +4224,11 @@ kbd {
transition: transform 0.1s, background 0.15s;
}
.session-tab .tab-subagent-badge:hover {
background: var(--accent-hover);
transform: scale(1.05);
@media (hover: hover) {
.session-tab .tab-subagent-badge:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
}
.session-tab .tab-subagent-badge .subagent-label {
@@ -4278,8 +4280,33 @@ kbd {
transition: background 0.1s;
}
.subagent-dropdown-item:hover {
background: var(--bg-hover);
/* Hover styles only for devices with real hover (mouse/trackpad).
On iOS Safari, :hover triggers a "double-tap" requirement — first tap activates
hover state, second tap fires click. Guarding with @media(hover:hover) avoids this. */
@media (hover: hover) {
.subagent-dropdown-item:hover {
background: var(--bg-hover);
}
.subagent-dropdown-item:hover .subagent-dropdown-name {
color: var(--accent-hover);
}
.subagent-dropdown-item:hover .subagent-dropdown-close {
opacity: 0.6;
}
.subagent-dropdown-close:hover {
opacity: 1;
color: var(--red);
}
}
/* Touch devices: show active state on tap instead of hover */
@media (hover: none) {
.subagent-dropdown-item:active {
background: var(--bg-hover);
}
.subagent-dropdown-close {
opacity: 0.6; /* Always visible on touch (no hover to reveal) */
}
}
/* Status dot instead of text label */
@@ -4313,10 +4340,6 @@ kbd {
white-space: nowrap;
}
.subagent-dropdown-item:hover .subagent-dropdown-name {
color: var(--accent-hover);
}
.subagent-dropdown-close {
font-size: 0.9rem;
color: var(--text-muted);
@@ -4326,15 +4349,6 @@ kbd {
transition: opacity 0.1s, color 0.1s;
}
.subagent-dropdown-item:hover .subagent-dropdown-close {
opacity: 0.6;
}
.subagent-dropdown-close:hover {
opacity: 1;
color: var(--red);
}
/* Task Panel */
.task-panel {
position: fixed;