vrr/agent-zero
2
0
Fork 0
mirror of https://github.com/agent0ai/agent-zero.git synced 2026-07-09 17:08:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Polish chat composer mobile alignment
Some checks are pending
Build And Publish Docker Images / plan (push) Waiting to run
Details
Build And Publish Docker Images / build (push) Blocked by required conditions
Details

Browse source 
Match the real chat composer to the welcome composer by using an 8px radius, centering the idle Waiting for input cue and fullscreen input control against the composer container, and switching the fullscreen input icon to the same fullscreen glyph used by modal surface Focus mode. Also remove the mobile-only #chat-input min-height under 640px so the composer can size naturally on narrow screens.
This commit is contained in:
Alessandro 2026-06-23 12:56:21 +02:00
parent 2f847f525e
commit 90abe05d2d
1 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

31
webui/components/chat/input/chat-bar-input.html
View file

@ -40,7 +40,7 @@
:class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;">
</div>
<button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
<span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
<span class="material-symbols-outlined" aria-hidden="true">fullscreen</span>
</button>
</div>
@ -69,7 +69,7 @@
min-height: 4.25rem;
padding: 0.42rem 0.52rem 0.42rem 0.72rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: 16px;
border-radius: 8px;
background: color-mix(in srgb, var(--color-panel) 72%, var(--color-background) 28%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
@ -154,6 +154,7 @@
min-width: 0;
display: flex;
align-items: center;
align-self: stretch;
}
#chat-input {
@ -245,14 +246,15 @@
#chat-input-progress-placeholder {
position: absolute;
top: 0.74rem;
top: 0;
bottom: 0;
left: 0.12rem;
right: 46px;
right: 2rem;
color: var(--color-text-muted);
opacity: 0.7;
font-family: var(--font-family-code, "Roboto Mono", monospace);
font-size: 0.9rem;
line-height: 1.45;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -268,27 +270,39 @@
#chat-input-progress-placeholder .chat-input-progress-cue {
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
line-height: 1;
}
#chat-input-progress-placeholder .chat-input-progress-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
line-height: 1;
color: var(--color-highlight);
vertical-align: -0.18rem;
}
#expand-button {
position: absolute;
top: 12px;
top: 50%;
right: 0;
width: 2rem;
height: 2rem;
background: transparent;
border: none;
cursor: pointer;
transform: scale(0.8);
transform: translateY(-50%) scale(0.8);
transform-origin: center;
font-size: 1.2rem;
color: var(--color-text);
opacity: 0.2;
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
#expand-button:hover {
@ -376,7 +390,6 @@
/* Responsive tweaks */
@media (max-width: 640px) {
#chat-input {
min-height: 4.2rem;
align-content: center;
}