mirror of
https://github.com/memohai/Memoh.git
synced 2026-04-25 07:00:48 +09:00
fix(web): pin chat input and make session list scrollable independently
Constrain the main layout to viewport height (h-dvh) and override SidebarProvider's min-h-svh so the height chain propagates correctly. Change main-container overflow from auto to hidden so the outer container never scrolls. Use absolute-positioning pattern for session sidebar ScrollArea (matching chat messages pattern) to ensure sessions scroll independently while the chat input stays fixed.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<SidebarInset class="flex flex-col overflow-hidden">
|
||||
<section class="flex-1 overflow-y-auto">
|
||||
<section class="flex-1 min-h-0 overflow-hidden">
|
||||
<router-view v-slot="{ Component }">
|
||||
<KeepAlive>
|
||||
<component :is="Component" />
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<section class="flex">
|
||||
<section class="flex h-dvh overflow-hidden">
|
||||
<sidebar-provider
|
||||
class="min-h-0 h-full"
|
||||
:default-open="sidebarDefaultOpen"
|
||||
>
|
||||
<section class="relative">
|
||||
|
||||
@@ -100,34 +100,38 @@
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<ScrollArea class="flex-1">
|
||||
<div class="flex flex-col gap-1 px-1.5 overflow-hidden">
|
||||
<SessionItem
|
||||
v-for="session in filteredSessions"
|
||||
:key="session.id"
|
||||
:session="session"
|
||||
:is-active="sessionId === session.id"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 relative min-h-0">
|
||||
<div class="absolute inset-0">
|
||||
<ScrollArea class="h-full">
|
||||
<div class="flex flex-col gap-1 px-1.5">
|
||||
<SessionItem
|
||||
v-for="session in filteredSessions"
|
||||
:key="session.id"
|
||||
:session="session"
|
||||
:is-active="sessionId === session.id"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentBotId && !loadingChats && filteredSessions.length === 0"
|
||||
class="px-3 py-6 text-center text-xs text-muted-foreground"
|
||||
>
|
||||
{{ t('chat.noSessions') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="currentBotId && !loadingChats && filteredSessions.length === 0"
|
||||
class="px-3 py-6 text-center text-xs text-muted-foreground"
|
||||
>
|
||||
{{ t('chat.noSessions') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="loadingChats"
|
||||
class="flex justify-center py-4"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="['fas', 'spinner']"
|
||||
class="size-4 animate-spin text-muted-foreground"
|
||||
/>
|
||||
<div
|
||||
v-if="loadingChats"
|
||||
class="flex justify-center py-4"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="['fas', 'spinner']"
|
||||
class="size-4 animate-spin text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user