ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-13 01:02:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: anchor chat input expand button to the input row (#27676)

Browse Source 
The "expand input" button was positioned with `fixed top-0 right-0`. That only kept it near the composer by accident: `#message-input-container` sets `backdrop-blur-sm`, and a backdrop-filter makes an element the containing block for fixed descendants, so the button resolved to the top-right corner of the entire composer instead of the text area it belongs to.

That corner is already taken. The `@`-tagged model chip renders as the first row of the same container with its dismiss button at the right end, so with a multi-line prompt and a tagged model the two controls are drawn on top of each other. The attached-files row has the same problem: the button paints over the first thumbnail and its remove button.

Anchor the button to the wrapper that holds the text area instead, using `relative`/`absolute`, so it always sits at the top-right of the input row and below whatever rows precede it. With no chip and no files the position is unchanged. As a side effect the button is no longer a child of the `overflow-auto` scroller, so it can no longer be clipped or scrolled out of view on long prompts.

Fixes #26736
This commit is contained in:
Classic298
2026-08-11 07:26:53 +02:00
committed by GitHub
parent b91bb67b55
commit be9af1653e
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/MessageInput.svelte
+14 -18
View File
@@ -1808,7 +1808,20 @@
</div>
{/if}
<div class="px-2">
<div class="px-2 relative">
{#if prompt.split('\n').length > 2}
<button
type="button"
class="absolute top-2.5 right-3 z-20 p-1 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
aria-label="Expand input"
on:click={() => {
showInputModal = true;
}}
>
<Expand />
</button>
{/if}
<div
class="scrollbar-hidden rtl:text-right ltr:text-left bg-transparent dark:text-gray-100 outline-hidden w-full pb-0.5 px-1 resize-none h-fit max-h-96 overflow-auto {files.length ===
0
@@ -1818,23 +1831,6 @@
: ''}"
id="chat-input-container"
>
{#if prompt.split('\n').length > 2}
<div class="fixed top-0 right-0 z-20">
<div class="mt-2.5 mr-3">
<button
type="button"
class="p-1 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
aria-label="Expand input"
on:click={async () => {
showInputModal = true;
}}
>
<Expand />
</button>
</div>
</div>
{/if}
{#if suggestions}
{#key $settings?.richTextInput ?? true}
{#key $settings?.showFormattingToolbar ?? false}