fix(前端): 弹窗内容被长文件名撑破右边框

DialogContent 的 grid 用隐式 auto 轨道,轨道 min 受 grid item 的
min-width:auto 支配。传输/分享确认框里「被拦截文件清单」是不换行文本,
把 400px 弹窗(扣 p-6 后仅 350px 可用)的轨道顶到 386.8px,
内容整体从右边框外溢 11px。

- dialog.tsx 加 grid-cols-1,轨道只跟容器宽,24 个弹窗共用此修复
- SecuritySkipWarning 的文件名由 truncate 改 break-all:原截断把要警告
  的文件名省略号掉了,用户看不清哪几个文件被拦

实测(重建 sfile-web 镜像后):轨道 350px、告警块右边缘 939 <= 弹窗 963、
清单横向溢出 0、4 条文件名完整可读;移动/分享/传输三个弹窗回归无溢出,
全屏预览弹窗的 flex 经 tailwind-merge 覆盖基类 grid,不受影响。
This commit is contained in:
KodouWZF
2026-11-02 20:39:45 +08:00
parent 47273ae3fd
commit 3910239b87
2 changed files with 6 additions and 3 deletions

View File

@@ -58,7 +58,10 @@ function DialogContent({
<DialogPrimitive.Content <DialogPrimitive.Content
data-slot="dialog-content" data-slot="dialog-content"
className={cn( className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg", // grid-cols-1 是必需的:默认的隐式 auto 轨道会被子项里不换行的长文本(长文件名等)
// 按 min-content 撑开,轨道宽度超过 max-w,内容就从弹窗右边框外溢出去。
// minmax(0,1fr) 让轨道只跟容器宽,内容交给子项自己 truncate/滚动。
"bg-background grid-cols-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
className className
)} )}
{...props} {...props}

View File

@@ -24,12 +24,12 @@ export function SecuritySkipWarning({ check, actionName }: SecuritySkipWarningPr
</div> </div>
<div className="max-h-24 overflow-auto space-y-0.5 pl-5"> <div className="max-h-24 overflow-auto space-y-0.5 pl-5">
{blocked.map((name: string) => ( {blocked.map((name: string) => (
<div key={name} className="text-xs text-red-400 truncate"> <div key={name} className="text-xs text-red-400 break-all">
• {name} • {name}
</div> </div>
))} ))}
{scanning.map((name: string) => ( {scanning.map((name: string) => (
<div key={name} className="text-xs text-amber-500 truncate"> <div key={name} className="text-xs text-amber-500 break-all">
• {name}(检测中) • {name}(检测中)
</div> </div>
))} ))}