dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hub): improve mobile AI coach layout

Browse Source 
Move new-chat button to top toolbar to prevent overlap, compact chrome, hide chrome when keyboard opens, and soften mobile tab styling.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-11 11:06:47 +08:00
parent 007e089121
commit c59a17f9ac
3 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+134 -22
View File
@@ -3897,12 +3897,14 @@ body.hub-page-ai #page-ai {
display: none;
}
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
margin-bottom: 4px;
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs,
body.hub-page-ai.hub-ai-keyboard-open .ai-chat-topbar,
body.hub-page-ai.hub-ai-keyboard-open .ai-chat-session-head {
display: none;
}
body.hub-page-ai.hub-ai-keyboard-open .ai-panel-head {
padding-bottom: 0;
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
margin-bottom: 4px;
}
body.hub-page-ai #page-ai {
@@ -3937,7 +3939,11 @@ body.hub-page-ai #page-ai {
color: var(--text);
border-color: var(--accent);
background: var(--accent-dim);
box-shadow: var(--glow);
box-shadow: none;
}
body.hub-page-ai #page-ai .page-desc {
display: none;
}
body.hub-page-ai .ai-layout {
@@ -3951,6 +3957,7 @@ body.hub-page-ai #page-ai {
overflow: hidden;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="chat"] .ai-chat-panel,
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-panel {
display: flex;
flex: 1 1 auto;
@@ -3964,14 +3971,11 @@ body.hub-page-ai #page-ai {
display: none !important;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main {
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main,
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-topbar {
display: none !important;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-bot-bar {
display: none;
}
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-history-panel {
display: flex;
flex: 1 1 auto;
@@ -3985,6 +3989,8 @@ body.hub-page-ai #page-ai {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 8px 10px;
gap: 6px;
}
body.hub-page-ai .ai-chat-panel {
@@ -3992,12 +3998,62 @@ body.hub-page-ai #page-ai {
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
background: transparent;
}
body.hub-page-ai .ai-chat-topbar {
gap: 6px;
}
body.hub-page-ai .ai-bot-tab {
min-height: 34px;
padding: 5px 8px;
font-size: 0.76rem;
}
body.hub-page-ai .ai-bot-tab.is-active {
box-shadow: none;
}
body.hub-page-ai .ai-chat-new-btn {
min-height: 34px;
padding: 5px 10px;
font-size: 0.76rem;
}
body.hub-page-ai .ai-chat-split {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
border: none;
border-radius: 0;
}
body.hub-page-ai .ai-chat-main {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.hub-page-ai .ai-chat-session-head {
margin: 0;
padding: 0 2px 4px;
}
body.hub-page-ai .ai-chat-session-head h2 {
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.02em;
}
body.hub-page-ai .ai-chat-messages {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 8px;
padding: 4px 2px 8px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@@ -4008,43 +4064,76 @@ body.hub-page-ai #page-ai {
z-index: 3;
width: 100%;
margin: 0;
padding: 10px 0 max(10px, env(safe-area-inset-bottom));
padding: 8px 0 max(8px, env(safe-area-inset-bottom));
background: var(--panel);
border-top: 1px solid var(--border-soft);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}
body.hub-page-ai .ai-chat-compose {
gap: 6px;
}
body.hub-page-ai .ai-chat-form textarea {
min-height: 44px;
max-height: 120px;
min-height: 40px;
max-height: 96px;
font-size: 16px;
width: 100%;
padding: 8px 10px;
}
body.hub-page-ai .ai-chat-compose-actions {
display: grid;
grid-template-columns: auto 1fr auto;
display: flex;
gap: 8px;
align-items: center;
width: 100%;
}
body.hub-page-ai .ai-chat-files-label {
flex: 1;
min-width: 0;
font-size: 0.68rem;
}
body.hub-page-ai .ai-chat-files-label:empty {
display: none;
}
body.hub-page-ai .ai-chat-upload-btn,
body.hub-page-ai #btn-ai-chat-send {
min-height: 44px;
min-height: 40px;
flex-shrink: 0;
}
body.hub-page-ai #btn-ai-chat-send {
min-width: 76px;
min-width: 72px;
margin-left: auto;
font-weight: 600;
}
body.hub-page-ai .ai-msg-row-user {
max-width: 92%;
max-width: 90%;
}
body.hub-page-ai .ai-msg-row-coach {
max-width: 96%;
max-width: 100%;
}
body.hub-page-ai .ai-bubble {
font-size: 0.86rem;
padding: 9px 11px;
}
body.hub-page-ai .ai-msg-role {
font-size: 0.68rem;
}
body.hub-page-ai .ai-chat-history-list {
padding: 6px 4px;
}
body.hub-page-ai .ai-chat-history-item {
padding: 10px 12px;
}
}
@@ -4324,11 +4413,34 @@ body.hub-page-ai #page-ai {
.ai-chat-panel .ai-chat-split {
flex: 1 1 auto;
}
.ai-chat-topbar {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.ai-chat-topbar .ai-bot-bar {
flex: 1 1 auto;
min-width: 0;
}
.ai-chat-new-btn {
flex-shrink: 0;
white-space: nowrap;
}
.ai-chat-session-head {
padding-bottom: 2px;
}
.ai-chat-session-head h2 {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-bot-bar {
display: flex;
gap: 8px;
flex-shrink: 0;
padding-bottom: 2px;
padding-bottom: 0;
}
.ai-bot-tab {
flex: 1;