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:
@@ -58,7 +58,10 @@ function DialogContent({
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
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
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -24,12 +24,12 @@ export function SecuritySkipWarning({ check, actionName }: SecuritySkipWarningPr
|
||||
</div>
|
||||
<div className="max-h-24 overflow-auto space-y-0.5 pl-5">
|
||||
{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}
|
||||
</div>
|
||||
))}
|
||||
{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}(检测中)
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user