Refactor flash message and remove SanitizeHTML template func (#37179)

1. Fix the "flash message" layout problem for different cases
* I am sure most of the users should have ever seen the ugly
center-aligned error message with multiple lines.
2. Fix inconsistent "Details" flash message EOL handling, sometimes
`\n`, sometimes `<br>`
   * Now, always use "\n" and use `<pre>` to render
3. Remove SanitizeHTML template func because it is not useful and can be
easily abused.
* But it is still kept for mail templates, for example:
https://github.com/go-gitea/gitea/issues/36049
4. Clarify PostProcessCommitMessage's behavior and add FIXME comment

By the way: cleaned up some devtest pages, move embedded style block to
CSS file

web_src/css/base.css

@@ -431,8 +431,9 @@ img.ui.avatar,
   margin-top: calc(var(--page-spacing) - 1rem);
 }
 
-.ui .message.flash-message {
-  text-align: center;
+.ui.message.flash-message pre {
+  white-space: pre-line;
+  margin: 0;
 }
 
 .ui .header > i + .content {
@@ -865,6 +866,13 @@ table th[data-sortt-desc] .svg {
   align-items: stretch;
 }
 
+/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
+.flex-relaxed-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-block);
+}
+
 .ui.list.flex-items-block > .item,
 .ui.vertical.menu.flex-items-block > .item,
 .ui.form .field > label.flex-text-block, /* override fomantic "block" style */

web_src/css/devtest.css

@@ -1,3 +1,8 @@
+h1, h2 {
+  margin: 0;
+  padding: 10px 0;
+}
+
 .button-sample-groups {
   margin: 0; padding: 0;
 }
@@ -10,7 +15,6 @@
   margin-bottom: 5px;
 }
 
-h1, h2 {
-  margin: 0;
-  padding: 10px 0;
+.fetch-action-demo-forms .form-fetch-action {
+  border: 1px red dashed; /* show the border for demo purpose */
 }