Fix status card close button location and margin

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.5.0",
+    "version": "3.5.1",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
@@ -34,10 +34,10 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-webpack": "^5.0.0",
-        "ts-loader": "^9.4.1",
+        "ts-loader": "^9.4.2",
         "ts-node": "^10.9.1",
-        "typescript": "^4.9.3",
+        "typescript": "^4.9.4",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.0"
+        "webpack-cli": "^5.0.1"
     }
 }

src/main/css/snippets/validation.css

@@ -1,14 +1,20 @@
 .status-card {
     font-weight: bold;
+    position: relative;
+}
+
+.status-card output {
+    display: block;
+    margin-right: var(--block-spacing-horizontal);
 }
 
 .status-card .close {
-    float: right;
-    display: block;
+    position: absolute;
+    right: var(--block-spacing-horizontal);
+    top: calc(var(--block-spacing-vertical) / 2);
 
     width: 1rem;
     height: 1rem;
-    margin: 0 0 calc(var(--block-spacing-vertical) / 2) calc(var(--block-spacing-vertical) / 2);
 
     background-image: var(--icon-close);
     background-position: center;

src/main/js/Validation.ts

@@ -34,14 +34,14 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
     }
     const output = $("output", card)!;
 
-    card.removeAttribute("aria-busy");
+    output.removeAttribute("aria-busy");
     card.classList.remove("hidden", "error", "info", "success", "warning");
 
     if (message == null || type == null) {
         card.classList.add("hidden");
         output.innerHTML = "";
     } else {
-        if (type === "busy") card.setAttribute("aria-busy", "true");
+        if (type === "busy") output.setAttribute("aria-busy", "true");
         else card.classList.add(type);
 
         output.innerHTML = message;