From c774bc0f6dba028d44c31f4d1a892c7ca823e4f7 Mon Sep 17 00:00:00 2001
From: Luckyu_js <11670186+luckyu-js@user.noreply.gitee.com>
Date: Tue, 14 Jul 2026 11:35:43 +0800
Subject: [PATCH] =?UTF-8?q?ui=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/media/MediaAnnotationToolbar.tsx | 15 ++++++++-------
 src/components/media/MediaInpaintingToolbar.tsx | 17 +++++++++--------
 src/components/nodes/NodeActionCapsule.tsx      |  6 +++---
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/media/MediaAnnotationToolbar.tsx b/src/components/media/MediaAnnotationToolbar.tsx
index 3e56e219..3d9cb54e 100644
--- a/src/components/media/MediaAnnotationToolbar.tsx
+++ b/src/components/media/MediaAnnotationToolbar.tsx
@@ -81,11 +81,12 @@ export function MediaAnnotationToolbar({
     left: centerX,
     top: frameRect.top,
     transform: "translate(-50%, calc(-100% - 10px))",
-    maxWidth: `min(${Math.max(frameRect.width, 360)}px, calc(100vw - 32px))`,
+    width: "max-content",
+    maxWidth: "calc(100vw - 32px)",
   } as CSSProperties;
 
   const toolButtonClass = (active: boolean) =>
-    `!h-9 !w-9 !rounded-md ${active ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`;
+    `!h-9 !w-9 !shrink-0 !rounded-md ${active ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`;
 
   const colorPopover = (
     <div className="flex w-[168px] flex-wrap gap-2 p-1">
@@ -124,7 +125,7 @@ export function MediaAnnotationToolbar({
 
   return (
     <div
-      className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-1.5 overflow-visible rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
+      className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-1.5 overflow-x-auto overflow-y-visible whitespace-nowrap rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
       style={topToolbarStyle}
     >
       <button
@@ -178,16 +179,16 @@ export function MediaAnnotationToolbar({
       <div className="mx-1 h-6 w-px shrink-0 bg-[var(--border-subtle)]" />
 
       <Tooltip title="删除选中">
-        <Button type="text" icon={<DeleteOutlined />} disabled={busy || !hasSelection} onClick={onDeleteSelected} className="!h-9 !w-9 !rounded-md" />
+        <Button type="text" icon={<DeleteOutlined />} disabled={busy || !hasSelection} onClick={onDeleteSelected} className="!h-9 !w-9 !shrink-0 !rounded-md" />
       </Tooltip>
       <Tooltip title="撤销">
-        <Button type="text" icon={<UndoOutlined />} disabled={busy || !canUndo} onClick={onUndo} className="!h-9 !w-9 !rounded-md" />
+        <Button type="text" icon={<UndoOutlined />} disabled={busy || !canUndo} onClick={onUndo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
       </Tooltip>
       <Tooltip title="重做">
-        <Button type="text" icon={<RedoOutlined />} disabled={busy || !canRedo} onClick={onRedo} className="!h-9 !w-9 !rounded-md" />
+        <Button type="text" icon={<RedoOutlined />} disabled={busy || !canRedo} onClick={onRedo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
       </Tooltip>
       <Tooltip title="清空">
-        <Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !rounded-md" />
+        <Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !shrink-0 !rounded-md" />
       </Tooltip>
 
       <div className="mx-1 h-6 w-px shrink-0 bg-[var(--border-subtle)]" />
diff --git a/src/components/media/MediaInpaintingToolbar.tsx b/src/components/media/MediaInpaintingToolbar.tsx
index a9d0dc8e..bbfd53c8 100644
--- a/src/components/media/MediaInpaintingToolbar.tsx
+++ b/src/components/media/MediaInpaintingToolbar.tsx
@@ -70,7 +70,8 @@ export function MediaInpaintingToolbar({
     left: centerX,
     top: frameRect.top,
     transform: "translate(-50%, calc(-100% - 10px))",
-    maxWidth: `min(${Math.max(frameRect.width, 320)}px, calc(100vw - 32px))`,
+    width: "max-content",
+    maxWidth: "calc(100vw - 32px)",
   } as CSSProperties;
   const bottomToolbarStyle = {
     left: centerX,
@@ -82,7 +83,7 @@ export function MediaInpaintingToolbar({
   return (
     <>
       <div
-        className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-2 overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
+        className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-2 overflow-x-auto overflow-y-visible whitespace-nowrap rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
         style={topToolbarStyle}
       >
         <button
@@ -106,7 +107,7 @@ export function MediaInpaintingToolbar({
           }}
           aria-label="画笔"
           title="画笔"
-          className={`!h-9 !w-9 !rounded-md ${!eraseMode && drawTool === "brush" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
+          className={`!h-9 !w-9 !shrink-0 !rounded-md ${!eraseMode && drawTool === "brush" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
         />
         <Button
           type="text"
@@ -118,7 +119,7 @@ export function MediaInpaintingToolbar({
           }}
           aria-label="矩形选区"
           title="矩形选区"
-          className={`!h-9 !w-9 !rounded-md ${!eraseMode && drawTool === "rectangle" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
+          className={`!h-9 !w-9 !shrink-0 !rounded-md ${!eraseMode && drawTool === "rectangle" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
         />
         <Button
           type="text"
@@ -126,7 +127,7 @@ export function MediaInpaintingToolbar({
           onClick={() => onEraseModeChange(true)}
           aria-label="橡皮"
           title="橡皮"
-          className={`!h-9 !w-9 !rounded-md ${eraseMode ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
+          className={`!h-9 !w-9 !shrink-0 !rounded-md ${eraseMode ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
         >
           <span className="inline-block h-3.5 w-3.5 rotate-45 rounded-[2px] border border-current" />
         </Button>
@@ -146,13 +147,13 @@ export function MediaInpaintingToolbar({
           />
         </div>
         <Tooltip title="撤销">
-          <Button type="text" icon={<UndoOutlined />} disabled={busy} onClick={onUndo} className="!h-9 !w-9 !rounded-md" />
+          <Button type="text" icon={<UndoOutlined />} disabled={busy} onClick={onUndo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
         </Tooltip>
         <Tooltip title="重做">
-          <Button type="text" icon={<RedoOutlined />} disabled={busy} onClick={onRedo} className="!h-9 !w-9 !rounded-md" />
+          <Button type="text" icon={<RedoOutlined />} disabled={busy} onClick={onRedo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
         </Tooltip>
         <Tooltip title="清空">
-          <Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !rounded-md" />
+          <Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !shrink-0 !rounded-md" />
         </Tooltip>
       </div>
       <div
diff --git a/src/components/nodes/NodeActionCapsule.tsx b/src/components/nodes/NodeActionCapsule.tsx
index 439478cd..e67bddc4 100644
--- a/src/components/nodes/NodeActionCapsule.tsx
+++ b/src/components/nodes/NodeActionCapsule.tsx
@@ -94,7 +94,7 @@ export function NodeActionCapsule({
     const isDisabled = action.disabled;
 
     const buttonClassName = [
-      "flex h-10 items-center justify-center rounded-md transition-colors",
+      "flex h-10 shrink-0 items-center justify-center rounded-md transition-colors",
       action.text ? "gap-1.5 whitespace-nowrap px-3 text-sm" : "px-2",
       isOpen ? "bg-[var(--surface-hover)] text-[var(--text-primary)]" : "",
       isDisabled ? "cursor-not-allowed opacity-60" : "",
@@ -127,7 +127,7 @@ export function NodeActionCapsule({
     );
 
     return (
-      <div key={action.key} className="relative">
+      <div key={action.key} className="relative shrink-0">
         {action.dropdown ? (
           <Dropdown
             trigger={["hover"]}
@@ -159,7 +159,7 @@ export function NodeActionCapsule({
   return (
     <NodeActionCapsuleShell ref={capsuleRef} topClassName={topClassName} onMouseDown={onMouseDown}>
       {sections.map((section, sectionIndex) => (
-        <div key={sectionIndex} className="flex items-center gap-2">
+        <div key={sectionIndex} className="flex shrink-0 items-center gap-2">
           {sectionIndex > 0 ? (
             <div
               className="mx-1 h-7 w-px bg-[var(--border-subtle)]"