fix: allow all display settings to work on mobile

- Remove display:none from CSS for all settings-controlled elements
- System stats, token count, monitor, subagents, project insights,
  file browser now respect user settings on mobile
- Settings already saved independently (mobile/desktop) via getSettingsStorageKey()
- Add compact mobile styling for each element instead of hiding

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-31 17:34:31 +01:00
co-authored by Claude Opus 4.5
parent b62ae9e42f
commit d7608a4885
3 changed files with 23 additions and 23 deletions
+1 -1
View File
@@ -16,7 +16,7 @@ When user says "COM":
1. Increment version in BOTH `package.json` AND `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.1471 (must match `package.json` for npm publish)
**Version**: 0.1472 (must match `package.json` for npm publish)
## Project Overview
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "claudeman",
"version": "0.1471",
"version": "0.1472",
"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",
+21 -21
View File
@@ -7833,8 +7833,10 @@ kbd {
height: 18px;
}
/* System stats - compact on tablet, visibility controlled by JS */
.header-system-stats {
display: none;
font-size: 0.6rem;
gap: 0.25rem;
}
.header-right {
@@ -7904,9 +7906,10 @@ kbd {
max-height: 40vh;
}
/* Hide project insights on tablet */
/* Project insights - compact on tablet, visibility controlled by JS */
.project-insights-panel {
display: none;
max-width: 280px;
font-size: 0.7rem;
}
}
@@ -7935,14 +7938,16 @@ kbd {
min-width: 14px;
}
/* Hide system stats on phones */
/* System stats - very compact on phones, visibility controlled by JS */
.header-system-stats {
display: none;
font-size: 0.55rem;
gap: 0.15rem;
}
/* Hide token count on phones - takes too much space */
/* Token count - compact on phones, visibility controlled by JS */
.header-tokens {
display: none;
font-size: 0.6rem;
padding: 0.1rem 0.3rem;
}
/* Ultra-compact header for mobile - fixed at top */
@@ -8332,23 +8337,14 @@ kbd {
color: #fff;
}
/* Full-width panels - hide on phones due to limited screen space and toolbar overlap */
/* Panels on mobile - full width, positioned above toolbar, visibility controlled by JS */
.monitor-panel,
.subagents-panel {
/* Hide by default on phones - not enough screen space and overlaps toolbar */
display: none !important;
}
/* When explicitly shown via class, use proper mobile styling */
.monitor-panel.force-show-mobile,
.subagents-panel.force-show-mobile {
display: flex !important;
width: 100%;
max-width: 100%;
left: 0;
right: 0;
border-radius: 8px 8px 0 0;
/* Position well above the mobile toolbar (44px + safe area) */
bottom: calc(44px + 2rem + var(--safe-area-bottom));
max-height: 35vh;
}
@@ -8520,14 +8516,18 @@ kbd {
padding-right: calc(0.5rem + var(--safe-area-right));
}
/* Project insights panel - hide on mobile */
/* Project insights panel - compact on mobile, visibility controlled by JS */
.project-insights-panel {
display: none !important;
max-width: 100%;
font-size: 0.65rem;
bottom: calc(44px + 2rem + var(--safe-area-bottom));
}
/* File browser panel - hide on mobile */
/* File browser panel - compact on mobile, visibility controlled by JS */
.file-browser-panel {
display: none !important;
max-width: 100%;
max-height: 50vh;
bottom: calc(44px + 2rem + var(--safe-area-bottom));
}
/* Notification drawer - full width on mobile, includes safe area padding */