feat(config): add expandable input for long payload override values

- Add ExpandableInput component that toggles between single-line <input>
  and auto-resizing <textarea> for long content (>30 chars)
- Apply to all payload rule fields: model name (both layout branches),
  json_path, param value, filter model name, and string list items
- Strip newline characters in both input and textarea onChange handlers
  to prevent multi-line values from breaking YAML serialization
- Use useLayoutEffect for resize to avoid visual flicker
- Remove redundant autoResize call from click handler (handled by effect)
- Disable expand/collapse buttons when field is disabled, with proper
  cursor and opacity styles
- Localize button labels via i18n (en, zh-CN, ru)
- Use explicit .expandableInputExpanded class instead of CSS :has()
  for cross-browser compatibility
This commit is contained in:
Xvvln
2026-03-22 18:52:32 +08:00
Unverified
parent 8758a75b39
commit bcaf637253
5 changed files with 183 additions and 26 deletions
@@ -72,6 +72,61 @@
}
}
.expandableInputWrapper {
position: relative;
display: flex;
align-items: flex-start;
min-width: 0;
flex: 1;
}
.expandableInputWrapper > .expandableTextarea,
.expandableInputWrapper > :global(.input) {
flex: 1;
min-width: 0;
padding-right: 28px;
}
.expandableTextarea {
resize: none;
min-height: 60px;
overflow: hidden;
line-height: 1.5;
padding-right: 32px;
}
.expandableToggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 10px;
line-height: 1;
padding: 2px;
color: var(--text-secondary, #999);
opacity: 0.5;
transition: opacity 0.15s;
z-index: 1;
&:hover {
opacity: 1;
}
&:disabled {
cursor: default;
opacity: 0.35;
}
}
.expandableInputExpanded .expandableToggle {
top: 8px;
transform: none;
right: 14px;
}
.overview {
position: relative;
overflow: hidden;