use `textarea` input to enter template values (see #1504)

src/ui/pages/options.css

@@ -33,6 +33,7 @@ button:not([disabled]):hover {
 button,
 select,
 input[type=text],
+textarea,
 input[type=password] {
     background-color: transparent;
     border-color: rgb(191, 191, 191);
@@ -42,6 +43,12 @@ input[type=password] {
     color: black;
 }
 
+textarea {
+    width: 100%;
+    height: 2.4em;
+    resize: vertical;
+}
+
 input[type=checkbox] {
     margin-bottom: 1px;
 }
@@ -674,6 +681,7 @@ html.maximized {
     }
 
     input[type="text"],
+    textarea,
     input[type="password"] {
         background-color: #fff;
     }

src/ui/pages/options.html

@@ -49,7 +49,7 @@
 			<summary id="filenameLabel"></summary>
 			<div class="option vertical">
 				<label for="filenameTemplateInput" id="filenameTemplateLabel"></label>
-				<input type="text" id="filenameTemplateInput">
+				<textarea id="filenameTemplateInput"></textarea>
 			</div>
 			<div class="option">
 				<label for="filenameMaxLengthInput" id="filenameMaxLengthLabel"></label>
@@ -169,7 +169,7 @@
 			</div>
 			<div class="option vertical">
 				<label for="infobarTemplateInput" id="infobarTemplateLabel"></label>
-				<input type="text" id="infobarTemplateInput">
+				<textarea id="infobarTemplateInput"></textarea>
 			</div>
 			<div class="option">
 				<label for="confirmInfobarInput" id="confirmInfobarLabel"></label>