+density on list

views/transform/form.css

@@ -117,6 +117,15 @@
 		@apply italic;
 	}
 
+	.extent-inline textarea {
+		field-sizing: content;
+		resize: none;
+		max-height: 10rem;
+		overflow: hidden;
+		overflow-wrap: anywhere;
+		white-space: pre-wrap;
+	}
+
 	.dbform .submitbutton {
 		@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
 	}

views/transform/main.js

@@ -218,6 +218,9 @@ function TextareaAutoResize(textarea) {
 		console.log("Not a textarea element");
 		return;
 	}
+	if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+		return;
+	}
 
 	// Skip if not visible
 	if (textarea.offsetParent === null) {
@@ -263,6 +266,9 @@ function HookupTextareaAutoResize(textarea) {
 		console.warn("HookupTextareaAutoResize: Provided element is not a textarea.");
 		return;
 	}
+	if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+		return;
+	}
 
 	// If browser supports field-sizing, CSS handles it
 	if (supportsFieldSizing()) {
@@ -346,6 +352,9 @@ function FormLoad(form) {
 
 	// Attach resize handler to all textareas
 	for (const textarea of textareas) {
+		if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+			continue;
+		}
 		console.log("Attaching input listener to:", textarea.name || textarea.id);
 		textarea.addEventListener("input", function () {
 			console.log("Input event on textarea:", this.name || this.id);
@@ -357,6 +366,9 @@ function FormLoad(form) {
 	setTimeout(() => {
 		console.log("Running initial textarea resize on", textareas.length, "textareas");
 		for (const textarea of textareas) {
+			if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+				continue;
+			}
 			TextareaAutoResize(textarea);
 		}
 	}, 200);
@@ -382,6 +394,9 @@ function FormLoad(form) {
 					const textareasInTarget = target.matches("textarea") ? [target] : Array.from(target.querySelectorAll("textarea"));
 
 					for (const textarea of textareasInTarget) {
+						if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+							continue;
+						}
 						// Only resize if now visible
 						if (textarea.offsetParent !== null) {
 							TextareaAutoResize(textarea);

views/transform/tool-tip.js

@@ -9,15 +9,17 @@ export class ToolTip extends HTMLElement {
 		this._timeout = 200;
 		this._hideTimeout = null;
 		this._hiddenTimeout = null;
+		this._dataTipElem = null;
+		this._observer = null;
 	}
 
 	connectedCallback() {
 		this.classList.add("relative", "block", "leading-none", "[&>*]:leading-normal");
-		const dataTipElem = this.querySelector(".data-tip");
-		const tipContent = dataTipElem ? dataTipElem.innerHTML : "Tooltip";
+		this._dataTipElem = this.querySelector(".data-tip");
+		const tipContent = this._dataTipElem ? this._dataTipElem.innerHTML : "Tooltip";
 
-		if (dataTipElem) {
-			dataTipElem.classList.add("hidden");
+		if (this._dataTipElem) {
+			this._dataTipElem.classList.add("hidden");
 		}
 
 		this._tooltipBox = document.createElement("div");
@@ -46,6 +48,19 @@ export class ToolTip extends HTMLElement {
 
 		this.addEventListener("mouseenter", () => this._showTooltip());
 		this.addEventListener("mouseleave", () => this._hideTooltip());
+
+		if (this._dataTipElem) {
+			this._observer = new MutationObserver(() => {
+				if (this._tooltipBox) {
+					this._tooltipBox.innerHTML = this._dataTipElem.innerHTML;
+				}
+			});
+			this._observer.observe(this._dataTipElem, {
+				childList: true,
+				characterData: true,
+				subtree: true,
+			});
+		}
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -57,6 +72,12 @@ export class ToolTip extends HTMLElement {
 		}
 	}
 
+	disconnectedCallback() {
+		if (this._observer) {
+			this._observer.disconnect();
+		}
+	}
+
 	_showTooltip() {
 		clearTimeout(this._hideTimeout);
 		clearTimeout(this._hiddenTimeout);