diff --git a/llm_team_ui.py b/llm_team_ui.py index 893142e..f901f25 100644 --- a/llm_team_ui.py +++ b/llm_team_ui.py @@ -490,7 +490,10 @@ HTML = r""" .output-card .card-body::-webkit-scrollbar { width: 4px; } .output-card .card-body::-webkit-scrollbar-track { background: transparent; } .output-card .card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } + .m-toggle { display: none; } + .m-collapse { display: block !important; } @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } } + @media (max-width: 768px) { .m-toggle { display: flex; } .m-collapse { display: none !important; } .m-collapse.open { display: block !important; } } .card-actions { display: flex; gap: 4px; padding: 4px 12px 8px; } .card-act { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text2); font-size: 10px; padding: 3px 8px; cursor: pointer; transition: all 0.15s; } .card-act:hover { border-color: var(--accent); color: var(--accent2); } @@ -540,7 +543,43 @@ HTML = r""" .hp-resp { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; } .hp-resp-header { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; display: flex; gap: 6px; align-items: center; } .hp-resp-body { padding: 8px 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; max-height: 200px; overflow-y: auto; } - @media (max-width: 768px) { .mode-grid { grid-template-columns: repeat(2, 1fr); } .container { padding: 12px; } .history-panel { width: 100%; } } + @media (max-width: 768px) { + .container { padding: 10px; } + header { padding: 10px 0; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } + header h1 { font-size: 18px; } + header .badge { font-size: 10px; padding: 3px 8px; } + header nav { gap: 3px; } + header nav a, header nav button, header nav span { font-size: 10px !important; padding: 3px 6px !important; } + .grid { grid-template-columns: 1fr; } + .grid > .left-scroll { order: 2; max-height: none; } + .grid > .panel:last-child { order: 1; } + .left-scroll { display: flex; flex-direction: column; gap: 8px; } + .left-scroll > .panel:first-child { order: 2; } + .left-scroll > .panel:last-child { order: 1; } + .m-toggle { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--accent2); } + .m-toggle::after { content: ''; margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text2); transition: transform 0.2s; } + .m-toggle.open::after { transform: rotate(180deg); } + .m-collapse { display: none; } + .m-collapse.open { display: block; } + .mode-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; } + .mode-tab { padding: 6px 3px; font-size: 10px; } + .mode-tab small { font-size: 7px; } + .model-card { padding: 6px 8px; } + .model-card .name { font-size: 11px; } + .prompt-area { min-height: 60px; font-size: 14px; } + .run-btn { padding: 14px; font-size: 16px; } + .output-card .card-body { font-size: 13px; max-height: 600px; } + .card-actions { flex-wrap: wrap; } + .panel { padding: 12px; } + .panel h2 { font-size: 10px; margin-bottom: 10px; } + .config-row { font-size: 11px; } + .config-row label { width: 70px; } + .mode-desc { font-size: 10px; padding: 6px 10px; } + .empty-state { padding: 40px 16px; } + .empty-state .icon { font-size: 24px; } + .history-panel { width: 100%; } + .repipe-modal { width: 95vw; } + } @@ -559,6 +598,8 @@ HTML = r"""
+
Mode: Brainstorm
+

Mode

@@ -738,6 +779,7 @@ HTML = r"""
+

Prompt

@@ -854,6 +896,8 @@ function setMode(mode) { const cfg = document.getElementById('config-' + mode); if (cfg) cfg.style.display = ''; document.getElementById('mode-desc').textContent = MODE_DESCS[mode] || ''; + const ml = document.getElementById('mode-label'); + if (ml) ml.textContent = mode.charAt(0).toUpperCase() + mode.slice(1); } let pipelineSteps = [];