use css for tilde background

src/components/CommandLine.astro

@@ -3,12 +3,10 @@
 		id="command-line-input"
 		type="text"
 		size="1"
-		class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent"
+		class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
 	/>
 	<div id="caret" aria-hidden="true" class="bg-text inline-block">&nbsp;</div>
-	<p id="status-text" class="absolute w-full h-full bg-base hidden italic">
-		test
-	</p>
+	<p id="status-text" class="absolute w-full h-full bg-base hidden italic"></p>
 </div>
 
 <script>
@@ -41,8 +39,8 @@
 	function enableCmdMode() {
 		caret.style.display = "block";
 		statusText.classList.add("hidden");
-		commandLineInput.size = 1;
 		commandLineInput.value = ":";
+		commandLineInput.style.width = "1ch";
 		isInCmdMode = true;
 
 		const event = new Event("cmdmodeenabled");
@@ -53,8 +51,8 @@
 		caret.style.display = "none";
 		isInCmdMode = false;
 		if (clear) {
-			commandLineInput.size = 1;
 			commandLineInput.value = "";
+			commandLineInput.style.width = "0ch";
 		}
 
 		const event = new Event("cmdmodedisabled");
@@ -63,7 +61,15 @@
 
 	function appendChar(event: KeyboardEvent) {
 		commandLineInput.value += event.key;
-		commandLineInput.size += 1;
+		commandLineInput.style.width = `${commandLineInput.value.length}ch`;
+	}
+
+	function deleteChar() {
+		commandLineInput.value = commandLineInput.value.substring(
+			0,
+			commandLineInput.value.length - 1,
+		);
+		commandLineInput.style.width = `${commandLineInput.value.length}ch`;
 	}
 
 	function executeCommand() {
@@ -101,11 +107,7 @@
 				if (commandLineInput.value === ":") {
 					disableCmdMode();
 				} else {
-					commandLineInput.value = commandLineInput.value.substring(
-						0,
-						commandLineInput.value.length - 1,
-					);
-					commandLineInput.size--;
+					deleteChar();
 				}
 				break;