style(subscription): align AddToKnowledgeModal with the modal spec
Shell per spec settled values: rounded-2xl, gray overlay (bg-gray-500/90), border #ebebeb + soft shadow, p-5 edge / gap-4 block rhythm, title text-base font-medium leading-6 with semantic text-text-1. Footer buttons move to the Button dual-axis API (default/outlined cancel, primary/solid confirm, built-in loading) in both the main picker and the duplicate-files dialog. Tree density: container padding 12->4, uniform 4px row spacing via space-y-1. Mobile fullscreen: shrink the fixed-footer reservation 84->64px to remove the dead gap above the action bar. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -206,7 +206,7 @@ function TreeNode({
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
return (
|
||||
<div className="w-full min-w-0 max-w-full">
|
||||
<div className="w-full min-w-0 max-w-full space-y-1">
|
||||
<div
|
||||
className={`group relative flex w-full min-w-0 max-w-full box-border items-center gap-1.5 py-1 px-2 rounded-md cursor-pointer text-sm select-none overflow-hidden
|
||||
${isSelected ? "bg-blue-50 text-primary" : "fine-pointer:hover:bg-gray-50 coarse-pointer:hover:bg-transparent"}`}
|
||||
@@ -272,7 +272,7 @@ function TreeNode({
|
||||
|
||||
{/* Children */}
|
||||
{isExpanded && node.children && node.children.length > 0 && (
|
||||
<div className="w-full min-w-0 max-w-full">
|
||||
<div className="w-full min-w-0 max-w-full space-y-1">
|
||||
{node.children.map(child => (
|
||||
<TreeNode
|
||||
key={child.id}
|
||||
@@ -800,7 +800,7 @@ export function AddToKnowledgeModal({
|
||||
: isChannelSyncCenteredMobile
|
||||
? "mb-4 flex min-h-0 flex-1 flex-col px-5 pt-4 touch-mobile:px-4"
|
||||
: isArticleMobileFullScreen
|
||||
? "flex min-h-0 flex-1 flex-col px-4 pt-4 pb-[84px]"
|
||||
? "flex min-h-0 flex-1 flex-col px-4 pt-4 pb-[64px]"
|
||||
: "flex min-h-0 flex-1 flex-col px-5 pt-4 touch-mobile:px-4"
|
||||
}
|
||||
>
|
||||
@@ -808,9 +808,9 @@ export function AddToKnowledgeModal({
|
||||
ref={treeScrollRevealRef}
|
||||
className={
|
||||
useFlexTree
|
||||
? "scrollbar-gutter-stable flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden rounded-md border border-[#ECECEC] p-3 scrollbar-on-scroll"
|
||||
? "scrollbar-gutter-stable flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden rounded-md border border-[#ECECEC] p-1 scrollbar-on-scroll"
|
||||
: cn(
|
||||
"scrollbar-gutter-stable h-[340px] max-h-full w-full overflow-y-auto overflow-x-hidden rounded-md border border-[#ECECEC] p-3 scrollbar-on-scroll",
|
||||
"scrollbar-gutter-stable h-[340px] max-h-full w-full overflow-y-auto overflow-x-hidden rounded-md border border-[#ECECEC] p-1 scrollbar-on-scroll",
|
||||
mode === "article" && isH5 && "touch-mobile:h-[calc(100dvh-260px)]",
|
||||
)
|
||||
}
|
||||
@@ -830,7 +830,7 @@ export function AddToKnowledgeModal({
|
||||
<p className="text-[14px] font-normal text-[#999999]">{localize("com_subscription.no_matching_knowledge_space")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full min-w-0 max-w-full py-1">
|
||||
<div className="w-full min-w-0 max-w-full space-y-1 pb-1">
|
||||
{displayTree.map(node => (
|
||||
<TreeNode
|
||||
key={node.id}
|
||||
|
||||
Reference in New Issue
Block a user