BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-02 21:49:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixed floating tabs on mobile - header stays at top when scrolling

Browse Source
This commit is contained in:
arkon
2026-01-31 08:19:41 +01:00
parent 8641296aa2
commit 92ec121ce7
3 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+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.1455 (must match `package.json`)
**Version**: 0.1456 (must match `package.json`)
## Project Overview
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "claudeman",
"version": "0.1455",
"version": "0.1456",
"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",
src/web/public/styles.css
+49 -11
View File
@@ -7790,13 +7790,36 @@ kbd {
Tablet Breakpoint (430px - 768px)
============================================================================ */
@media (max-width: 768px) and (min-width: 430px) {
/* Compact header for tablet - includes safe area padding */
/* Compact header for tablet - fixed at top, includes safe area padding */
.header {
min-height: 44px;
max-height: 64px;
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 48px;
max-height: 48px;
padding: 0.35rem 0.5rem;
padding-left: calc(0.5rem + var(--safe-area-left));
padding-right: calc(0.5rem + var(--safe-area-right));
background: #0a0a0a;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
z-index: 200;
}
/* iOS safe area adjustment for fixed header - header extends into notch area */
.ios-device .header {
padding-top: calc(0.35rem + var(--safe-area-top));
min-height: calc(48px + var(--safe-area-top));
max-height: calc(48px + var(--safe-area-top));
}
/* Add top margin to main content to account for fixed header */
.main {
margin-top: 48px;
}
.ios-device .main {
margin-top: calc(48px + var(--safe-area-top));
}
/* Hide some header elements on tablet for more space */
@@ -7885,11 +7908,6 @@ kbd {
Phone Breakpoint (<430px)
============================================================================ */
@media (max-width: 430px) {
/* iOS safe area - only top padding on app, sides go to header/toolbar */
.ios-device .app {
padding-top: var(--safe-area-top);
}
/* Hide header brand on phones */
.header-brand {
display: none;
@@ -7910,18 +7928,38 @@ kbd {
display: none;
}
/* Ultra-compact header for mobile */
/* Ultra-compact header for mobile - fixed at top */
.header {
min-height: 32px;
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 36px;
max-height: 36px;
padding: 0.15rem 0.3rem;
padding-left: calc(0.3rem + var(--safe-area-left));
padding-right: calc(0.3rem + var(--safe-area-right));
gap: 0.15rem;
flex-shrink: 0;
overflow: hidden;
background: #0a0a0a;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
z-index: 200;
}
/* iOS safe area adjustment for fixed header - header extends into notch area */
.ios-device .header {
padding-top: calc(0.15rem + var(--safe-area-top));
min-height: calc(36px + var(--safe-area-top));
max-height: calc(36px + var(--safe-area-top));
}
/* Add top margin to main content to account for fixed header */
.main {
margin-top: 36px;
}
.ios-device .main {
margin-top: calc(36px + var(--safe-area-top));
}
.header-right {