Fix "delete" modal dialog for issue/PR (#27015)

Close #27012

By the way, rename the single-word ID to a long ID.


![image](https://github.com/go-gitea/gitea/assets/2114189/9f05ecc3-0a3d-4612-85e0-da60f7a45d2e)


![image](https://github.com/go-gitea/gitea/assets/2114189/9133808c-bd89-4265-99c5-83b986bd266f)

Author: wxiaoguang

templates/devtest/fomantic-modal.tmpl

@@ -30,6 +30,16 @@
 		</form>
 	</div>
 
+	<div id="test-modal-form-4" class="ui mini modal">
+		<div class="header">Form dialog (layout 4)</div>
+		<div class="content">
+			<div class="ui input gt-w-100"><input name="user_input"></div>
+		</div>
+		<form method="post">
+			{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+		</form>
+	</div>
+
 	<div class="ui g-modal-confirm modal" id="test-modal-default">
 		<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
 		<div class="content">

templates/repo/issue/view_content/sidebar.tmpl

@@ -655,11 +655,11 @@
 				</form>
 			</div>
 		</div>
-		<button class="gt-mt-2 fluid ui show-modal button" data-modal="#delete">
+		<button class="gt-mt-2 fluid ui show-modal button" data-modal="#sidebar-delete-issue">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.issues.delete"}}
 		</button>
-		<div class="ui g-modal-confirm modal" id="delete">
+		<div class="ui g-modal-confirm modal" id="sidebar-delete-issue">
 			<div class="header">
 				{{if .Issue.IsPull}}
 					{{.locale.Tr "repo.pulls.delete.title"}}

web_src/css/modules/modal.css

@@ -36,6 +36,7 @@ However, Gitea uses the following layouts:
 * <div .modal><div .content><div .actions/></div></div>
 * <div .modal><form><div .content/><div .actions/></form></div>
 * <div .modal><div .content><form><div .actions/></form></div></div>
+* <div .modal><div .content></div><form><div .actions/></form></div>
 * ...
 These inconsistent layouts should be refactored to simple ones.
 */
@@ -47,7 +48,8 @@ These inconsistent layouts should be refactored to simple ones.
 }
 
 .ui.modal > .actions,
-.ui.modal .content + .actions {
+.ui.modal .content + .actions,
+.ui.modal .content + form > .actions {
   background: var(--color-secondary-bg);
   border-color: var(--color-secondary);
   padding: 1rem;