Improved options page

options.css

@@ -14,8 +14,6 @@ body {
 	font-size: 1rem;
 }
 body > div {
-	border: 1px solid #ddd;
-	padding: 30px 15px 15px 15px;
 	position: relative;
 }
 body > div + div {
@@ -24,15 +22,14 @@ body > div + div {
 h1 {
 	border-bottom: 1px solid #ddd;
 	margin: 0.5em 0;
+	font-size: 2rem;
 }
 h2 {
 	margin: 0;
 	background-color: #fff;
-	padding: 10px 15px;
-	position: absolute;
-	top: calc(-1 * (0.625em + 10px));
-	left: 10px;
-	border: inherit;
+	border-bottom: 1px solid #ddd;
+	font-size: 1.625rem;
+	padding: 0 0 2px 0;
 }
 textarea {
 	border: 1px solid #aaa;
@@ -40,6 +37,7 @@ textarea {
 	font-size: 1.125rem;
 	width: 100%;
 	display: block;
+	max-height: calc(100vh - 275px);
 }
 #matchingPatterns textarea {
 	min-height: 300px;

options.js

@@ -47,6 +47,11 @@ function resetChanges() {
 
 		toggleModeSelectorState(window.currentMode);
 		setButtonsActive(false);
+
+		// Expand all textareas.
+		document.querySelectorAll("textarea").forEach(textarea => {
+			expandTextarea(textarea);
+		});
 	});
 }
 
@@ -56,6 +61,15 @@ function setButtonsActive(active) {
 	});
 }
 
+function expandTextarea(textarea) {
+	let totalBorderHeight = 2;
+	if (textarea.clientHeight == textarea.scrollHeight + totalBorderHeight) return;
+	requestAnimationFrame(() => {
+		textarea.style.height = 'auto';
+		textarea.style.height = textarea.scrollHeight + totalBorderHeight + 'px';
+	});
+}
+
 /******************/
 /* INITIALIZATION */
 /******************/
@@ -86,6 +100,13 @@ function initialize() {
 		});
 	});
 
+	// Listeners to auto-expand textareas on input.
+	document.querySelectorAll("textarea").forEach(textarea => {
+		textarea.addEventListener("input", (event) => {
+			expandTextarea(textarea);
+		});
+	});
+
 	// Listeners for mode select switch.
 	document.querySelector("input[type='checkbox']").addEventListener("change", (event) => {
 		modeSelectorInputReceived();