@visns-studio/visns-components 6.3.14 → 6.3.16

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.3.14",
+    "version": "6.3.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -2603,6 +2603,8 @@ function Field({
                                 <textarea
                                     value={cell[cellKey] || ''}
                                     data-id={settings.id}
+                                    rows={3}
+                                    className={styles.autoGrowCellTextarea}
                                     onChange={(e) =>
                                         onChangeTableRadio(e, rowKey, cellKey)
                                     }
@@ -2801,6 +2803,8 @@ function Field({
                                 <textarea
                                     value={cell || ''}
                                     data-id={settings.id}
+                                    rows={3}
+                                    className={styles.autoGrowCellTextarea}
                                     onChange={(e) =>
                                         onChangeTableText(e, rowKey, cellKey)
                                     }
@@ -2947,7 +2951,7 @@ function Field({
                         <textarea
                             ref={variableTextareaRef}
                             data-name={settings.id}
-                            className={inputClass[settings.id]}
+                            className={`${inputClass[settings.id] || ''} ${styles.autoGrowTextarea}`.trim()}
                             onChange={onChange}
                             value={
                                 inputValue && inputValue !== 'null'

package/src/components/styles/Field.module.scss

@@ -1764,3 +1764,38 @@ input[type='file']:hover {
         color: var(--danger-color, #dc3545);
     }
 }
+
+/* =========================================================================
+   Auto-growing note/comment textareas
+
+   A fixed `rows` box turns a long note log into a porthole: the reader
+   scrolls a few lines at a time inside a form that has plenty of room.
+   Where the browser supports it (field-sizing), the box sizes itself to
+   its content so a note history reads top to bottom with the page's own
+   scroll; the `rows` attribute stays as the fallback everywhere else.
+   `resize: vertical` keeps a drag handle in both worlds, so a reviewer
+   can pull the box taller regardless of support.
+
+   Two minimums: a standalone Notes/Comments field opens at roughly its
+   old 8-row size so an empty form doesn't collapse to a slit; a
+   table-cell textarea starts near its 3-row fallback so checklist rows
+   stay compact until they have content.
+   ========================================================================= */
+
+.autoGrowTextarea {
+    resize: vertical;
+
+    @supports (field-sizing: content) {
+        field-sizing: content;
+        min-height: 8lh;
+    }
+}
+
+.autoGrowCellTextarea {
+    resize: vertical;
+
+    @supports (field-sizing: content) {
+        field-sizing: content;
+        min-height: 3lh;
+    }
+}

package/src/components/styles/global.css

@@ -39,6 +39,16 @@ select {
     font: inherit;
 }
 
+/* Floor under every textarea: the browser default (`rows` omitted) is two
+   lines, which renders a multi-line field as a slit. Three lines of text
+   plus the field's own padding is the least a free-text box can be and
+   still read as one. A bare element selector, so any component that sets
+   its own height with a class still wins. */
+textarea {
+    min-height: 5.5em; /* ~3 lines + padding, for browsers without lh */
+    min-height: calc(3lh + 2rem);
+}
+
 /* Global radio button styling */
 input[type='radio'],
 .radio-input {