LLM/moltbot
1
0
Fork 0
mirror of https://github.com/moltbot/moltbot.git synced 2026-03-07 22:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): update component styles with spacing, padding, and typography adjustments for improved layout

Browse Source
This commit is contained in:
Val Alexander
2026-02-22 06:26:20 -06:00
parent fb577d2482
commit 284961108a
6 changed files with 131 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/styles/chat/agent-chat.css
View File

@@ -1124,28 +1124,28 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 16px;
padding: 4px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
flex-shrink: 0;
gap: 8px;
gap: 6px;
}
.chat-agent-bar__left {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
min-width: 0;
}
.chat-agent-bar__right {
display: flex;
align-items: center;
gap: 4px;
gap: 2px;
flex-shrink: 0;
}
.chat-agent-bar__name {
font-size: 13px;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
@@ -1155,14 +1155,14 @@
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
font-size: 13px;
font-size: 12px;
font-weight: 500;
padding: 4px 24px 4px 8px;
padding: 2px 20px 2px 6px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 6px center;
background-position: right 4px center;
transition:
border-color 150ms ease,
background 150ms ease;
@@ -1188,10 +1188,10 @@
.chat-sessions-summary {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-md);
font-size: 12px;
gap: 4px;
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
@@ -1222,8 +1222,8 @@
}
.chat-sessions-summary svg {
width: 13px;
height: 13px;
width: 12px;
height: 12px;
}
.chat-sessions-list {
@@ -1250,13 +1250,13 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
gap: 6px;
padding: 4px 8px;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text);
font-size: 12px;
font-size: 11px;
cursor: pointer;
text-align: left;
width: 100%;

39
ui/src/styles/chat/layout.css
View File

@@ -52,7 +52,7 @@
flex: 1 1 0; /* Grow, shrink, and use 0 base for proper scrolling */
overflow-y: auto;
overflow-x: hidden;
padding: 14px 8px;
padding: 10px 6px;
margin: 0 -4px;
min-height: 0; /* Allow shrinking for flex scroll behavior */
border-radius: var(--radius-lg);
@@ -318,13 +318,13 @@
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
gap: 6px;
flex-wrap: wrap;
}
.chat-controls__session {
min-width: 140px;
max-width: 300px;
min-width: 120px;
max-width: 260px;
}
.chat-controls__thinking {
@@ -336,9 +336,9 @@
/* Icon button style */
.btn--icon {
padding: 8px !important;
min-width: 36px;
height: 36px;
padding: 6px !important;
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -350,8 +350,8 @@
/* Controls separator */
.chat-controls__separator {
color: var(--border);
font-size: 18px;
margin: 0 8px;
font-size: 14px;
margin: 0 2px;
font-weight: 300;
}
@@ -369,8 +369,8 @@
.btn--icon svg {
display: block;
width: 18px;
height: 18px;
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.5px;
@@ -379,9 +379,9 @@
}
.chat-controls__session select {
padding: 6px 10px;
font-size: 13px;
max-width: 300px;
padding: 4px 8px;
font-size: 12px;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -390,8 +390,8 @@
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
padding: 4px 10px;
font-size: 11px;
padding: 2px 8px;
background: color-mix(in srgb, var(--secondary) 90%, transparent);
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
@@ -399,7 +399,7 @@
@media (max-width: 640px) {
.chat-session {
min-width: 140px;
min-width: 100px;
}
.chat-compose {
@@ -408,10 +408,11 @@
.chat-controls {
flex-wrap: wrap;
gap: 8px;
gap: 4px;
}
.chat-controls__session {
min-width: 120px;
min-width: 100px;
max-width: 180px;
}
}

10
ui/src/styles/components.css
View File

@@ -2840,16 +2840,16 @@
}
.ov-log-tail-content {
margin-top: 12px;
max-height: 250px;
margin-top: 10px;
max-height: 220px;
overflow: auto;
font-family: var(--mono);
font-size: 11px;
line-height: 1.6;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-all;
word-break: break-word;
background: var(--bg-inset, var(--bg));
padding: 12px;
padding: 10px;
border-radius: var(--radius);
border: 1px solid var(--border);
}

2
ui/src/styles/layout.css
View File

@@ -722,7 +722,7 @@
.content--chat {
display: flex;
flex-direction: column;
gap: 24px;
gap: 16px;
overflow: hidden;
padding-bottom: 0;
}

86
ui/src/styles/layout.mobile.css
View File

@@ -140,8 +140,21 @@
flex-shrink: 0;
}
/* Content */
/* Content — compact header on chat, hide on other tabs */
.content-header {
padding: 0;
max-height: 48px;
}
.content:not(.content--chat) .content-header {
display: none;
}
.content--chat .page-title {
font-size: 18px;
}
.content--chat .page-sub {
display: none;
}
@@ -212,10 +225,29 @@
}
/* Chat */
.chat-agent-bar {
padding: 4px 8px;
gap: 4px;
}
.chat-agent-bar__name {
font-size: 11px;
}
.chat-agent-select {
font-size: 11px;
padding: 2px 16px 2px 4px;
}
.chat-sessions-summary {
padding: 2px 4px;
font-size: 10px;
}
.chat-header {
flex-direction: column;
align-items: stretch;
gap: 8px;
gap: 6px;
}
.chat-header__left {
@@ -233,40 +265,60 @@
}
.chat-thread {
margin-top: 8px;
padding: 12px 8px;
margin-top: 6px;
padding: 10px 6px;
}
.chat-msg {
max-width: 90%;
max-width: 92%;
}
.chat-bubble {
padding: 8px 12px;
padding: 6px 10px;
border-radius: var(--radius-md);
}
.chat-compose {
gap: 8px;
gap: 6px;
}
.chat-compose__field textarea {
min-height: 60px;
padding: 8px 10px;
min-height: 52px;
padding: 6px 10px;
border-radius: var(--radius-md);
font-size: 14px;
}
.agent-chat__input {
margin: 0 8px 10px;
}
.agent-chat__toolbar {
padding: 4px 8px;
}
.agent-chat__input-btn,
.agent-chat__toolbar .btn-ghost {
width: 28px;
height: 28px;
}
.agent-chat__input-btn svg,
.agent-chat__toolbar .btn-ghost svg {
width: 14px;
height: 14px;
}
/* Log stream */
.log-stream {
border-radius: var(--radius-md);
max-height: 380px;
max-height: 320px;
}
.log-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 8px;
gap: 2px;
padding: 6px;
}
.log-time {
@@ -282,7 +334,15 @@
}
.log-message {
font-size: 12px;
font-size: 11px;
word-break: break-word;
}
.ov-log-tail-content {
max-height: 200px;
font-size: 10px;
padding: 8px;
line-height: 1.5;
}
/* Lists */

17
ui/src/ui/views/overview-log-tail.ts
View File

@@ -2,6 +2,12 @@ import { html, nothing } from "lit";
import { t } from "../../i18n/index.ts";
import { icons } from "../icons.ts";
/** Strip ANSI escape codes (SGR, OSC-8) for readable log display. */
function stripAnsi(text: string): string {
/* eslint-disable no-control-regex -- stripping ANSI escape sequences requires matching ESC */
return text.replace(/\x1b\]8;;.*?\x1b\\|\x1b\]8;;\x1b\\/g, "").replace(/\x1b\[[0-9;]*m/g, "");
}
export type OverviewLogTailProps = {
lines: string[];
redacted: boolean;
@@ -13,6 +19,13 @@ export function renderOverviewLogTail(props: OverviewLogTailProps) {
return nothing;
}
const displayLines = props.redacted
? "[log hidden]"
: props.lines
.slice(-50)
.map((line) => stripAnsi(line))
.join("\n");
return html`
<details class="card ov-log-tail">
<summary class="ov-expandable-toggle">
@@ -28,9 +41,7 @@ export function renderOverviewLogTail(props: OverviewLogTailProps) {
}}
>${icons.loader}</span>
</summary>
<pre class="ov-log-tail-content ${props.redacted ? "redacted" : ""}">${
props.redacted ? "[log hidden]" : props.lines.slice(-50).join("\n")
}</pre>
<pre class="ov-log-tail-content ${props.redacted ? "redacted" : ""}">${displayLines}</pre>
</details>
`;
}