fix(findings): 「按资产」视图资产列表溢出时补回滚动条
左侧资产树的滚动容器靠 height:100% 取高,但外层卡片只给了 max-height 没有确定高度,百分比高度解析失败,资产多时列表撑破卡片或被截断且无法 滚动。改为把高度上限直接放到资产树的原生滚动容器上(overflow-y-auto + max-h,随窗口自适应),资产少随内容收缩、资产多封顶并出滚动条。 Closes #170
This commit is contained in:
1 parent
b590898d1f
commit
4b1eda8e92
3 files changed
+10
-5
No files matched your search
@@ -18,7 +18,6 @@ import {
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import type { FindingAssetKind, FindingAssetNode } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -299,12 +298,12 @@ export function AssetTree({
|
||||
<span className="text-xs tabular-nums text-muted-foreground">{findingTotal}</span>
|
||||
</button>
|
||||
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="flex flex-col pr-2">
|
||||
<div className="max-h-[24rem] min-h-0 flex-1 overflow-y-auto pr-2 lg:max-h-[calc(100vh-16rem)]">
|
||||
<div className="flex flex-col">
|
||||
{rows}
|
||||
{rows.length === 0 && <p className="px-2 py-8 text-center text-xs text-muted-foreground">{emptyHint}</p>}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{truncated && (
|
||||
<p className="px-1 text-xs text-muted-foreground">
|
||||
|
||||
@@ -964,7 +964,7 @@ export default function FindingsPage() {
|
||||
{view === "asset" && (
|
||||
<div className="grid min-h-0 items-start gap-4 lg:grid-cols-[20rem_minmax(0,1fr)] xl:grid-cols-[24rem_minmax(0,1fr)]">
|
||||
<Card className="gap-0 py-3 lg:sticky lg:top-4">
|
||||
<CardContent className="flex max-h-[24rem] flex-col px-3 lg:max-h-[calc(100vh-14rem)]">
|
||||
<CardContent className="flex flex-col px-3">
|
||||
{assetTree.loading && !assetTree.loaded ? (
|
||||
<div className="flex min-h-36 items-center justify-center">
|
||||
<Spinner />
|
||||
|
||||
Reference in new issue
Block a user