style: final sidebar UI polish and cache update (2026-05-14)
This commit is contained in:
g1nation
+62
-12
@@ -333,23 +333,56 @@
|
||||
|
||||
/* Agent cards inside the manage overlay. */
|
||||
.company-agent-list { display: flex; flex-direction: column; gap: 6px; padding: 0; }
|
||||
/*
|
||||
* Agent card layout, rebuilt 2026-05-14 to fix overflow:
|
||||
* - Card itself stacks its rows VERTICALLY (`flex-direction: column`).
|
||||
* The old version was a horizontal flex container, which caused
|
||||
* the head row, mix row, and editor row to compete for the same
|
||||
* horizontal space — content spilled past the overlay's right edge.
|
||||
* - The head row uses `flex-wrap: wrap` so when the sidebar is too
|
||||
* narrow to fit emoji + body + 3 controls in one line, the
|
||||
* controls drop to a second row instead of clipping the tagline.
|
||||
* - The mix row likewise wraps; slider takes priority and the
|
||||
* hint/checkbox fall to the next line when there's no room.
|
||||
* - `overflow: hidden` on the card itself prevents any one-pixel
|
||||
* overflow from leaking past the rounded border.
|
||||
*/
|
||||
.company-agent-card {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.company-agent-card[data-active="false"] { opacity: 0.55; }
|
||||
.company-agent-card[data-locked="true"] .company-agent-toggle { cursor: not-allowed; opacity: 0.4; }
|
||||
|
||||
.company-agent-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap; /* controls drop to row 2 when narrow */
|
||||
row-gap: 6px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.company-agent-emoji {
|
||||
font-size: 18px; flex-shrink: 0;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 6px; background: var(--bg-secondary);
|
||||
}
|
||||
.company-agent-body { flex: 1; min-width: 0; line-height: 1.35; }
|
||||
.company-agent-body {
|
||||
flex: 1 1 180px; /* prefer ≥180px, shrink down to its content */
|
||||
min-width: 0;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
}
|
||||
.company-agent-name {
|
||||
color: var(--text-bright); font-weight: 600; font-size: 12px;
|
||||
display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
|
||||
@@ -361,12 +394,16 @@
|
||||
margin-top: 1px;
|
||||
}
|
||||
.company-agent-controls {
|
||||
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto; /* push to the right of the head row */
|
||||
max-width: 100%;
|
||||
}
|
||||
.company-agent-toggle {
|
||||
background: transparent; border: 1px solid var(--border);
|
||||
color: var(--text-dim); font-size: 10px; font-weight: 600;
|
||||
padding: 3px 8px; border-radius: 999px; cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.company-agent-card[data-active="true"] .company-agent-toggle {
|
||||
border-color: var(--accent); color: var(--accent);
|
||||
@@ -375,7 +412,8 @@
|
||||
background: var(--input-bg); border: 1px solid var(--border);
|
||||
color: var(--text-primary); font-size: 10px;
|
||||
padding: 3px 6px; border-radius: 6px;
|
||||
max-width: 150px; min-width: 0;
|
||||
width: 120px; min-width: 0; /* fixed width keeps row predictable */
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.company-agent-model option { color: var(--text-primary); background: var(--bg); }
|
||||
@@ -391,25 +429,37 @@
|
||||
background: var(--accent-glow);
|
||||
}
|
||||
|
||||
/* Per-agent Knowledge Mix slider row — sits between the controls
|
||||
row and the (collapsed) prompt editor. Indent matches the
|
||||
prompt-editor indent (38px) so the emoji stays as the visual
|
||||
"ruler" for everything that follows. */
|
||||
/* Per-agent Knowledge Mix slider. Wraps so the slider always has
|
||||
breathing room — hint + checkbox flow to next line when needed. */
|
||||
.company-agent-mix-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin: 6px 0 0 38px;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 4px;
|
||||
margin: 0; /* gap on parent handles the spacing */
|
||||
font-size: 10px; color: var(--text-dim);
|
||||
}
|
||||
.company-agent-mix-label { flex-shrink: 0; }
|
||||
.company-agent-mix-slider {
|
||||
flex: 1; min-width: 0;
|
||||
flex: 1 1 120px; /* slider is the row's hero */
|
||||
min-width: 80px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
.company-agent-mix-slider:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.company-agent-mix-hint {
|
||||
flex-shrink: 0; font-size: 9.5px; color: var(--text-dim);
|
||||
min-width: 165px; text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.company-agent-mix-source {
|
||||
font-size: 9px; color: var(--text-dim);
|
||||
padding: 1px 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
}
|
||||
.company-agent-mix-source.override {
|
||||
color: var(--accent); border-color: var(--accent);
|
||||
background: var(--accent-glow);
|
||||
}
|
||||
.company-agent-mix-cbwrap {
|
||||
display: inline-flex; align-items: center; gap: 3px;
|
||||
@@ -423,7 +473,7 @@
|
||||
Reset / Save / Cancel — empty save clears that field's override. */
|
||||
.company-agent-editor {
|
||||
display: none;
|
||||
margin: 6px 0 0 38px; /* indent under the emoji */
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px dashed var(--border);
|
||||
|
||||
Reference in New Issue
Block a user