fix(wallet): 修复计费历史弹窗分页与列表重叠 (#5627)

base-ui 的 ScrollArea 仅靠 max-height 无法约束高度:其 Viewport 用
height:100%,当 Root 只有 max-height 而无确定高度时会回退为 auto,
内容撑满并溢出到 Root 之外,盖住下方分页。改用原生 max-h + overflow-y-auto
的 div,列表正确内部滚动,分页作为同级元素干净地排在下方。
This commit is contained in:
skynono
2026-06-20 21:35:47 +08:00
committed by GitHub
parent 7409174456
commit 0c6c1b373a
@@ -35,7 +35,6 @@ import {
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
Select,
SelectContent,
@@ -145,7 +144,7 @@ export function BillingHistoryDialog({
</div>
{/* Records List */}
<ScrollArea className='max-h-[min(54vh,520px)] pr-3 sm:pr-4'>
<div className='max-h-[min(54vh,520px)] overflow-y-auto pr-1'>
{loading ? (
<div className='space-y-3'>
{Array.from({ length: 5 }).map((_, i) => (
@@ -275,7 +274,7 @@ export function BillingHistoryDialog({
})}
</div>
)}
</ScrollArea>
</div>
{/* Pagination */}
{!loading && records.length > 0 && (