еще разок

Author: paveler

src/components/fps/dataentry/input/input.module.css

@@ -331,29 +331,25 @@ a.checkbox_clearOption {
   opacity: 1;
 }
 .input_wrapper .json_toolbar {
-  position: absolute;
-  top: 6px;
-  right: 6px;
   display: flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-.input_wrapper .field_wrapper:hover .json_toolbar {
-  opacity: 1;
+  gap: 4px;
+  padding: 4px 0 0 0;
+  justify-content: flex-end;
 }
 .input_wrapper .json_toolbar_btn {
   cursor: pointer;
-  opacity: 0.4;
-  padding: 4px;
+  opacity: 0.35;
+  padding: 4px 6px;
   border-radius: var(--border-radius);
-  font-size: var(--text-very-small-size);
   line-height: 1;
   user-select: none;
   transition: opacity 0.15s;
 }
+.input_wrapper .json_toolbar_btn:before {
+  font-size: 20px;
+}
 .input_wrapper .json_toolbar_btn:hover {
-  opacity: 0.9;
+  opacity: 0.85;
 }
 :global .react-tooltip {
   z-index: 1000;

src/components/fps/dataentry/input/jsonInput.js

@@ -19,12 +19,12 @@ export default function JsonInput({
     const isFocused = useRef(false)
     const prevDefaultValue = useRef(defaultValue)
 
-    // --- Автовысота через scrollHeight ---
+    // height: auto !important в CSS перебивает inline height, поэтому используем min-height
     const adjustHeight = useCallback(() => {
         const el = textareaRef.current
         if (!el || rows !== 'auto') return
-        el.style.height = 'auto'
-        el.style.height = el.scrollHeight + 'px'
+        el.style.minHeight = '0'
+        el.style.minHeight = el.scrollHeight + 'px'
     }, [rows])
 
     useEffect(() => {
@@ -219,26 +219,25 @@ export default function JsonInput({
                 value={value}
                 placeholder={placeholder || ''}
             />
-            <div className={styles.json_toolbar}>
-                {value && !disabled && !copy &&
-                    <div
-                        className={`${styles.json_toolbar_btn} icon icon-close`}
-                        title="Clear"
-                        onClick={handleClear}
-                    />}
-                {value && copy &&
-                    <div
-                        className={`${styles.json_toolbar_btn} icon icon-copy`}
-                        title="Copy"
-                        onClick={handleCopy}
-                    />}
-                {value && !disabled &&
+            {value && !disabled &&
+                <div className={styles.json_toolbar}>
                     <div
                         className={`${styles.json_toolbar_btn} icon icon-code`}
                         title="Format JSON"
                         onClick={handleFormat}
-                    />}
-            </div>
+                    />
+                    {copy &&
+                        <div
+                            className={`${styles.json_toolbar_btn} icon icon-copy`}
+                            title="Copy"
+                            onClick={handleCopy}
+                        />}
+                    <div
+                        className={`${styles.json_toolbar_btn} icon icon-close`}
+                        title="Clear"
+                        onClick={handleClear}
+                    />
+                </div>}
             {warningMsg.msg &&
                 <div className={`${styles.status} ${styles[warningMsg.type]}`}>{warningMsg.msg}</div>}
         </div>