diff --git a/webui/components/chat/input/chat-bar-input.html b/webui/components/chat/input/chat-bar-input.html index 001265161..f79ecf8b4 100644 --- a/webui/components/chat/input/chat-bar-input.html +++ b/webui/components/chat/input/chat-bar-input.html @@ -40,7 +40,7 @@ :class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;"> @@ -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; }