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');
       }

web_src/js/modules/shortcut.ts

@@ -2,7 +2,6 @@ import {registerGlobalInitFunc} from './observer.ts';
 import {createElementFromHTML, hideElem, toggleElem} from '../utils/dom.ts';
 import {showFomanticModal} from './fomantic/modal.ts';
 import {html} from '../utils/html.ts';
-import {svgRaw} from '../svg.ts';
 
 type ShortcutHandler = (el: HTMLElement) => boolean;
 
@@ -76,7 +75,7 @@ function showShortcutHelp() {
       <div id="global-shortcut-help" class="ui small modal" role="dialog" aria-modal="true">
         <div class="header">
           Keyboard Shortcuts
-          ${svgRaw('octicon-x', 16, 'close-modal')}
+          <button type="button" class="close-modal"></button>
         </div>
         <div class="scrolling content">
           <table class="ui very basic compact unstackable table">