fix: align scope picker with catalog toolbar

frontend/src/settings/ScopePicker.tsx

@@ -18,6 +18,7 @@ export function ScopePicker({
   value,
   onChange,
   local = false,
+  inline = false,
   active = true,
   revision = "",
   options,
@@ -28,6 +29,7 @@ export function ScopePicker({
   value: Scope;
   onChange: (scope: Scope) => void;
   local?: boolean;
+  inline?: boolean;
   active?: boolean;
   revision?: string;
   options?: ScopeOption[];
@@ -86,7 +88,10 @@ export function ScopePicker({
     value.universe &&
     Number.isFinite(value.delay);
   return (
-    <section className="scope-picker" aria-label="组合选择">
+    <section
+      className={`scope-picker${inline ? " scope-picker-inline" : ""}`}
+      aria-label="组合选择"
+    >
       <div className="scope-picker-summary">
         <div>
           <span className="settings-label">组合</span>

frontend/src/settings/style.css

@@ -5,7 +5,7 @@
 .scope-picker-summary {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 16px;
   padding: 12px;
   border: 1px solid var(--semi-color-border);
@@ -83,3 +83,30 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* The toolbar variant keeps the summary compact; editing does not move the table. */
+.scope-picker-inline {
+  position: relative;
+  margin: 0;
+  max-width: 100%;
+}
+.scope-picker-inline .scope-picker-summary {
+  padding: 0;
+  border: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.scope-picker-inline .scope-picker-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  box-sizing: border-box;
+  width: min(560px, calc(100vw - 48px));
+  max-height: min(600px, 65dvh);
+  overflow-y: auto;
+  background: var(--semi-color-bg-2);
+  border: 1px solid var(--semi-color-border);
+  border-radius: 6px;
+  box-shadow: var(--semi-shadow-elevated);
+}