ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-04-25 18:14:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): scroll falls behind prompt input

Browse Source
This commit is contained in:
Adam
2026-03-13 08:39:42 -05:00
parent 6653f868ae
commit b88b323049
1 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/components/prompt-input.tsx
View File

@@ -121,7 +121,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
let slashPopoverRef!: HTMLDivElement let slashPopoverRef!: HTMLDivElement
const mirror = { input: false } const mirror = { input: false }
const inset = 44 const inset = 52
const space = `${inset}px`
const scrollCursorIntoView = () => { const scrollCursorIntoView = () => {
const container = scrollRef const container = scrollRef
@@ -156,8 +157,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
} }
} }
const queueScroll = () => { const queueScroll = (count = 2) => {
requestAnimationFrame(scrollCursorIntoView) requestAnimationFrame(() => {
scrollCursorIntoView()
if (count > 1) queueScroll(count - 1)
})
} }
const activeFileTab = createSessionTabs({ const activeFileTab = createSessionTabs({
@@ -1266,7 +1270,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
editorRef?.focus() editorRef?.focus()
}} }}
> >
<div class="relative max-h-[240px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}> <div
class="relative max-h-[240px] overflow-y-auto no-scrollbar"
ref={(el) => (scrollRef = el)}
style={{ "scroll-padding-bottom": space }}
>
<div <div
data-component="prompt-input" data-component="prompt-input"
ref={(el) => { ref={(el) => {
@@ -1288,22 +1296,34 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
classList={{ classList={{
"select-text": true, "select-text": true,
"w-full pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true, "w-full pl-3 pr-2 pt-2 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
"[&_[data-type=file]]:text-syntax-property": true, "[&_[data-type=file]]:text-syntax-property": true,
"[&_[data-type=agent]]:text-syntax-type": true, "[&_[data-type=agent]]:text-syntax-type": true,
"font-mono!": store.mode === "shell", "font-mono!": store.mode === "shell",
}} }}
style={{ "padding-bottom": space }}
/> />
<Show when={!prompt.dirty()}> <Show when={!prompt.dirty()}>
<div <div
class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate" class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
classList={{ "font-mono!": store.mode === "shell" }} classList={{ "font-mono!": store.mode === "shell" }}
style={{ "padding-bottom": space }}
> >
{placeholder()} {placeholder()}
</div> </div>
</Show> </Show>
</div> </div>
<div
aria-hidden="true"
class="pointer-events-none absolute inset-x-0 bottom-0"
style={{
height: space,
background:
"linear-gradient(to top, var(--surface-raised-stronger-non-alpha) calc(100% - 20px), transparent)",
}}
/>
<div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2"> <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
<input <input
ref={fileInputRef} ref={fileInputRef}