Remove the last direct jquery usage of the renderer javascript.

Also convert nested css to standard css.  Newer browser's support this,
but just in case someone is using an older browser.

Author: drgrice1

public/js/navbar.js

@@ -21,15 +21,26 @@ for (const element of templateItems) {
 	});
 }
 
-$(function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width());
-}).on('input', function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width() + 12);
-	const remaining =
-		document.querySelector('.topnav').offsetWidth - document.querySelector('#template-select').offsetWidth - 330;
-	$('#sourceFilePath').css('maxWidth', remaining);
+window.addEventListener('DOMContentLoaded', () => {
+	const sourceFilePath = document.getElementById('sourceFilePath');
+	const hiddenSourceFilePath = document.getElementById('hiddenSourceFilePath');
+	if (!sourceFilePath || !hiddenSourceFilePath) return;
+
+	const adjustSourceWidth = () => {
+		hiddenSourceFilePath.textContent = sourceFilePath.value;
+		hiddenSourceFilePath.style.display = 'inline';
+		sourceFilePath.style.width = `${hiddenSourceFilePath.offsetWidth + 12}px`;
+		hiddenSourceFilePath.style.display = 'none';
+
+		const remaining =
+			document.querySelector('.topnav').offsetWidth -
+			document.querySelector('#template-select').offsetWidth -
+			330;
+		sourceFilePath.style.maxWidth = `${remaining}px`;
+	};
+
+	sourceFilePath.addEventListener('input', adjustSourceWidth);
+	adjustSourceWidth();
 });
 
 let loadbutton = document.getElementById('load-problem');

templates/columns/editorUI.html.ep

@@ -1,5 +1,4 @@
 %= javascript 'node_modules/@openwebwork/pg-codemirror-editor/dist/pg-codemirror-editor.js'
-%= javascript 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
 
 <div id='edit-header' class='header'>
     <b>Editing problem:</b><br>
@@ -24,22 +23,22 @@
 	overflow: auto;
 	background-color: white;
 	height: 100%;
+}
 
-	.cm-editor {
-		height: 100%;
+.code-mirror-editor .cm-editor {
+	height: 100%;
+}
 
-		.cm-scroller {
-			height: 100%;
+.code-mirror-editor .cm-editor .cm-scroller {
+	height: 100%;
+}
 
-			.cm-content {
-				height: 100%;
-				min-height: 400px;
-			}
-		}
+.code-mirror-editor .cm-editor .cm-scroller .cm-content {
+	height: 100%;
+	min-height: 400px;
+}
 
-		.cm-panels {
-			z-index: 18;
-		}
-	}
+.code-mirror-editor .cm-editor .cm-panels {
+	z-index: 18;
 }
 % end