shawn/hermes-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix agent tab wrapping: horizontal scroll instead of flex-shrink

Browse Source 
- Tabs now scroll horizontally (overflow-x: auto) with hidden scrollbar
- Each tab maintains its natural width (flex-shrink: 0) — no wrapping
- Label stays pinned (flex-shrink: 0) so it doesn't get lost when scrolling
This commit is contained in:
Shawn
2026-06-02 18:02:10 -04:00
parent 1a3740cdad
commit 2840d8b58e
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#0d1117">
<title>Hermes Command Center</title>
<link rel="stylesheet" href="/static/style.css?v=15">
<link rel="stylesheet" href="/static/style.css?v=16">
</head>
<body>
<div id="app">
static/style.css
+9 -6
View File
@@ -51,7 +51,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.chat-profiles-label {
@@ -59,20 +58,25 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
color: var(--text-muted);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.chat-profile-tabs {
display: flex;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: 1;
padding-bottom: 2px;
}
.chat-profile-tabs::-webkit-scrollbar { display: none; }
.chat-profile-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px 8px;
gap: 4px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 16px;
background: transparent;
@@ -81,8 +85,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex: 1;
min-width: 0;
flex-shrink: 0;
}
.chat-profile-tab:hover {