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:
+2
-3
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user