using div.code instead of custom textarea

web/css/kvm/about.css

@@ -23,37 +23,6 @@ div#about tr.version {
 	font-family: monospace;
 }
 
-
+div#about div#about-meta {
-div#about textarea {
-	display: block;
-	resize: none;
-	width: 100%;
 	height: 200px;
-	padding: 0;
-	color: var(--cs-code-default-fg);
-	background-color: var(--cs-code-default-bg);
-	border: none;
-	border-radius: 4px;
-	outline: 0 !important;
-	box-sizing: border-box;
-	padding: 5px;
-	font-family: monospace;
-	-webkit-appearance:none;
-}
-
-div#about textarea::-moz-placeholder {
-	line-height: 190px;
-	text-align: center;
-}
-div#about textarea::-webkit-input-placeholder {
-	line-height: 190px;
-	text-align: center;
-}
-
-div#about textarea::-webkit-scrollbar {
-    width: 8px;
-}
-div#about textarea::-webkit-scrollbar-thumb {
-	border-radius: 4px;
-	background: var(--cs-scroll-default-bg);
 }

web/js/kvm/session.js

@@ -27,13 +27,15 @@ function Session() {
 				if (http.status === 200) {
 					var info = JSON.parse(http.responseText).result;
 					if (info.meta) {
-						$("about-meta").innerHTML = (
+						var text = JSON.stringify(info.meta, undefined, 4).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
-							"// Pi-KVM metadata.\n"
+						$("about-meta").innerHTML = `
-							+ "// You can get this json using handle /kvmd/info.\n"
+							<span class="code-comment">// The Pi-KVM metadata.<br>
-							+ "// In the standard configuration this data\n"
+							// You can get this json using handle /kvmd/info.<br>
-							+ "// is specified in the file /etc/kvmd/meta.yaml.\n\n"
+							// In the standard configuration this data<br>
-							+ JSON.stringify(info.meta, undefined, 4)
+							// is specified in the file /etc/kvmd/meta.yaml.</span><br>
-						);
+							<br>
+							${text}
+						`;
 						if (info.meta.server && info.meta.server.host) {
 							document.title = "Pi-KVM Session - " + info.meta.server.host;
 							$("kvmd-meta-server-host").innerHTML = "Server: " + info.meta.server.host;

web/kvm/index.html

@@ -573,7 +573,9 @@
 				</tr>
 			</table>
 			<hr>
-			<textarea readonly placeholder="No data" id="about-meta"></textarea>
+			<div id="about-meta" class="code">
+				<span class="code-comment">No data</span>
+			</div>
 			<hr>
 			<p class="text">
 				Full documentation, source code, hardware schematics and legal information