Fix: Use with modern dialog store for firmwareUpgradeRequired, update warning content

locales/en/messages.json

@@ -635,7 +635,7 @@
         "message": "Non - Betaflight firmware is <span class=\"message-negative\">not supported</span>, except for CLI mode."
     },
     "firmwareUpgradeRequired": {
-        "message": "The firmware on this device needs upgrading to a newer version. Use CLI for backup before flashing. CLI backup/restore procedure is in the documentation.<br />Alternatively download and use an old version of the app if you are not ready to upgrade."
+        "message": "The current version of the app may not support the firmware version on this device. You can use older releases such as <a href=\"https://github.com/betaflight/betaflight/releases/10.8.0\" target=\"_blank\" rel=\"noopener noreferrer\">10.8.0</a> for firmware down to 4.1 or <a href=\"https://github.com/betaflight/betaflight/releases/10.5.1\" target=\"_blank\" rel=\"noopener noreferrer\">10.5.1</a> for even older firmware versions.<br><br>The app will try to access the CLI on the device - if it succeeds, you can see the current firmware version by sending the <code>version</code> command in the CLI.<br><br>Alternatively, you can upgrade to a newer firmware version. Use CLI for backup before flashing, the procedure is in the <a href=\"https://betaflight.com/docs/wiki/getting-started/setup-guide#backup-your-configuration\" target=\"_blank\" rel=\"noopener noreferrer\">documentation</a>. But keep in mind that backups from older versions of the firmware may not carry over correctly when restoring to a newer version. Modes, OSD, rates and ports should transfer safely, but be careful around the PID and failsafe settings."
     },
     "resetToCustomDefaultsDialog": {
         "message": "There are custom defaults for this board available. Normally, a board will not work properly unless custom defaults are applied.<br />Do you want to apply the custom defaults for this board?"
@@ -9022,4 +9022,4 @@
     "preflightForecastWeather": {
         "message": "Weather"
     }
-}
+}

src/css/main.less

@@ -538,7 +538,7 @@ dialog {
         margin: 0px;
     }
     width: fit-content;
-    max-width: 400px;
+    max-width: 42rem;
 }
 
 .tab_title {

src/js/serial_backend.js

@@ -345,22 +345,18 @@ function abortConnection() {
 
 // Centralized helper: show version mismatch warning and switch to CLI
 function showVersionMismatchAndCli(message) {
-    const dialog = document.querySelector(".dialogConnectWarning");
-
-    if (dialog) {
-        const content = dialog.querySelector(".dialogConnectWarning-content");
-        if (content) {
-            content.innerHTML = message;
-        }
-        const closeBtn = dialog.querySelector(".dialogConnectWarning-closebtn");
-        if (closeBtn) {
-            closeBtn.onclick = () => dialog.close();
-        }
-
-        dialog.showModal();
-    } else {
-        gui_log(message);
-    }
+    const dialogStore = useDialogStore();
+    dialogStore.open(
+        "InformationDialog",
+        {
+            title: i18n.getMessage("warningTitle"),
+            text: message,
+            confirmText: i18n.getMessage("close"),
+        },
+        {
+            confirm: () => dialogStore.close(),
+        },
+    );
 
     connectCli();
 }