diff --git a/src/app/chat/SideBar/SessionList/index.tsx b/src/app/chat/SideBar/SessionList/index.tsx index d8885f2e..a40b8bc8 100644 --- a/src/app/chat/SideBar/SessionList/index.tsx +++ b/src/app/chat/SideBar/SessionList/index.tsx @@ -17,6 +17,10 @@ const List = dynamic(() => import('./List'), { }); const useStyles = createStyles(({ css, token, prefixCls }) => ({ + session: css` + overflow-y: auto; + height: 100%; + `, list: css` padding: 8px; `, @@ -54,7 +58,7 @@ const SessionList = () => { const [searchName, setSearchName] = useState(); const { t } = useTranslation('chat'); return ( - <> +
{ ]} />
- + ); }; diff --git a/src/app/chat/SideBar/index.tsx b/src/app/chat/SideBar/index.tsx index 1624a1d0..832d1499 100644 --- a/src/app/chat/SideBar/index.tsx +++ b/src/app/chat/SideBar/index.tsx @@ -5,15 +5,23 @@ import { createStyles, useResponsive } from 'antd-style'; import { rgba } from 'polished'; import { useEffect } from 'react'; -import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token'; +import { HEADER_HEIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token'; import { useGlobalStore } from '@/store/global'; import SessionList from './SessionList'; const useStyles = createStyles(({ css, token }) => ({ + content: css` + display: flex; + flex-direction: column; + height: 100% !important; + `, sidebar: css` display: flex; flex-direction: column; + + height: calc(100vh - ${HEADER_HEIGHT}px); + background-color: ${rgba(token.colorBgLayout, 0.2)}; backdrop-filter: saturate(180%) blur(8px); `, @@ -43,6 +51,7 @@ const SideBar = () => { return (