Input Modal Fixes (#336)

A couple small things:
- make the timer more robust in case of a timing issue where the timer
skips 0
- make the x button in the corner work
- style the title to stand out

The title will need more styling in the future, but this is still an
improvement.

frontend/app/modals/userinputmodal.less

@@ -1,6 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+.userinput-header {
+    font-weight: bold;
+    color: var(--main-text-color);
+    padding-bottom: 10px;
+}
+
 .userinput-body {
     display: flex;
     flex-direction: column;

frontend/app/modals/userinputmodal.tsx

@@ -14,7 +14,6 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");
     const [countdown, setCountdown] = useState(Math.floor(userInputRequest.timeoutms / 1000));
     const checkboxStatus = useRef(false);
-    const queryTextAtom = useState;
 
     const handleSendCancel = useCallback(() => {
         UserInputService.SendUserInputResponse({
@@ -96,7 +95,7 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
 
     useEffect(() => {
         let timeout: ReturnType<typeof setTimeout>;
-        if (countdown == 0) {
+        if (countdown <= 0) {
             timeout = setTimeout(() => {
                 handleSendCancel();
             }, 300);
@@ -109,9 +108,9 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
     }, [countdown]);
 
     return (
-        <Modal onOk={() => handleSubmit()} onCancel={() => handleSendCancel()}>
+        <Modal onOk={() => handleSubmit()} onCancel={() => handleSendCancel()} onClose={() => handleSendCancel()}>
+            <div className="userinput-header">{userInputRequest.title + ` (${countdown}s)`}</div>
             <div className="userinput-body">
-                {userInputRequest.title + ` (${countdown}s)`}
                 {queryText}
                 {inputBox}
             </div>