use float left on legend and input-grid to remove legend span nesting,

improve linting tool

config.html

@@ -27,11 +27,11 @@
 				<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
 				<form>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Resources</legend></span>
+						<legend>Resources</legend>
 						<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Disks</legend></span>
+						<legend>Disks</legend>
 						<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
@@ -39,14 +39,14 @@
 						</div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Network Interfaces</legend></span>
+						<legend>Network Interfaces</legend>
 						<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="network-add" src="images/actions/network/add.svg" class="clickable" alt="Add New Network Interface" title="Add New Network Interface">
 						</div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding none" id="devices-card">
-						<span><legend>PCIe Devices</legend></span>
+						<legend>PCIe Devices</legend>
 						<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="device-add" src="images/actions/device/add.svg" class="clickable" alt="Add New PCIe Device" title="Add New PCIe Device">

css/form.css

@@ -1,4 +1,5 @@
 .input-grid {
+	float: left;
 	display: grid;
 	column-gap: 10px;
 	row-gap: 5px;
@@ -15,6 +16,10 @@
 }
 
 legend {
+	float: left;
+	width: 100%;
+	margin: 0;
+	padding: 0;
 	line-height: 1.5em;
 	margin-top: 0.25lh;
 	margin-bottom: 0.25lh;

package.json

@@ -4,7 +4,7 @@
 	"description": "Front-end for ProxmoxAAS",
 	"type": "module",
 	"scripts": {
-		"lint": "html-validator --continue; stylelint --fix **/*.css; eslint --fix .;"
+		"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix ."
 	},
 	"devDependencies": {
 		"eslint": "^8.43.0",

scripts/config.js

@@ -548,7 +548,7 @@ async function handleNetworkDelete () {
 	const header = `Delete net${netID}`;
 	const body = "";
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
 			const result = await requestAPI(`/${node}/${type}/${vmid}/net/net${netID}/delete`, "DELETE");
@@ -572,7 +572,7 @@ async function handleNetworkAdd () {
 		body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\"></input>";
 	}
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			const body = {
 				rate: form.get("rate")
@@ -702,7 +702,7 @@ async function handleDeviceDelete () {
 	const header = `Remove Expansion Card ${deviceID}`;
 	const body = "";
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
 			const result = await requestAPI(`/${node}/${type}/${vmid}/pci/hostpci${deviceID}/delete`, "DELETE");

scripts/dialog.js

@@ -11,15 +11,12 @@ export function dialog (header, body, callback = async (result, form) => { }) {
 	dialog.className = "w3-container w3-card w3-border-0";
 	dialog.querySelector("#prompt").innerText = header;
 	dialog.querySelector("form").innerHTML = body;
-
-	document.body.append(dialog);
-	dialog.showModal();
-
 	dialog.addEventListener("close", async () => {
 		await callback(dialog.returnValue, new FormData(dialog.querySelector("form")));
 		dialog.parentElement.removeChild(dialog);
 	});
-
+	document.body.append(dialog);
+	dialog.showModal();
 	return dialog;
 }