refactor: clean ui modal component (#39654)

1. use "button" element for the modal close button
2. remove "ui modal" width hacks

web_src/js/modules/fomantic/modal.ts

@@ -40,10 +40,12 @@ function ariaModalFn(this: JQueryElem, ...args: Parameters<FomanticInitFunction>
   const ret = fomanticModalFn.apply(this, args);
   if (args[0] === 'show' || args[0]?.autoShow) {
     for (const el of this) {
+      el.querySelector('.close-modal')?.setAttribute('aria-label', 'Close');
       // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
       // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
       // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
       // So, all "cancel" buttons without "[type]" must be marked as "type=button".
+      // Although there are lint rules for "button type", some HTML code is generated in JS/Vue/Go which isn't linted, so we still need this patch.
       for (const button of el.querySelectorAll('form button.cancel:not([type])')) {
         button.setAttribute('type', 'button');
       }