[BUG] Center icon and callout text

- Wrap the icon and callout into a seperate `<p>` which has `display:
flex; align-items: center` set. To center the icon with the callout text.
- Resolves #3006

modules/markup/markdown/callout/github.go

@@ -72,6 +72,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
 
 			// create an emphasis to make it bold
 			attentionParagraph := ast.NewParagraph()
+			attentionParagraph.SetAttributeString("class", []byte("attention-title"))
 			emphasis := ast.NewEmphasis(2)
 			emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
 			firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)

modules/markup/markdown/callout/github_legacy.go

@@ -51,8 +51,15 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te
 			// color the blockquote
 			v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
 
-			// Prepend callout icon before the callout node itself
-			firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType))
+			// Create new parargaph.
+			attentionParagraph := ast.NewParagraph()
+			attentionParagraph.SetAttributeString("class", []byte("attention-title"))
+
+			// Move the callout node to the paragraph and insert the paragraph.
+			attentionParagraph.AppendChild(attentionParagraph, NewAttention(calloutType))
+			attentionParagraph.AppendChild(attentionParagraph, calloutNode)
+			firstParagraph.Parent().InsertBefore(firstParagraph.Parent(), firstParagraph, attentionParagraph)
+			firstParagraph.RemoveChild(firstParagraph, calloutNode)
 		}
 
 		return ast.WalkContinue, nil

modules/markup/sanitizer.go

@@ -64,6 +64,7 @@ func createDefaultPolicy() *bluemonday.Policy {
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
 
 	// For attention
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-title$`)).OnElements("p")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")

web_src/css/base.css

@@ -1127,6 +1127,11 @@ input:-webkit-autofill:active,
   margin: auto 0.5em auto 0;
 }
 
+.attention-title {
+  align-items: center;
+  display: flex;
+}
+
 blockquote.attention-note {
   border-left-color: var(--color-blue-dark-1);
 }