Don't use <br /> in alert block

modules/markup/markdown/goldmark.go

@@ -219,21 +219,18 @@ func (g *ASTTransformer) Transform(node *ast.Document, reader text.Reader, pc pa
 			v.SetAttributeString("class", []byte("gt-py-3 attention attention-"+attentionType))
 
 			// create an emphasis to make it bold
+			attentionParagraph := ast.NewParagraph()
 			emphasis := ast.NewEmphasis(2)
 			emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
-			firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)
 
 			// capitalize first letter
 			attentionText := ast.NewString([]byte(strings.ToUpper(string(attentionType[0])) + attentionType[1:]))
 
-			// replace the ![TYPE] with icon+Type
+			// replace the ![TYPE] with a dedicated paragraph of icon+Type
 			emphasis.AppendChild(emphasis, attentionText)
-			for i := 0; i < 2; i++ {
-				lineBreak := ast.NewText()
-				lineBreak.SetSoftLineBreak(true)
-				firstParagraph.InsertAfter(firstParagraph, emphasis, lineBreak)
-			}
-			firstParagraph.InsertBefore(firstParagraph, emphasis, NewAttention(attentionType))
+			attentionParagraph.AppendChild(attentionParagraph, NewAttention(attentionType))
+			attentionParagraph.AppendChild(attentionParagraph, emphasis)
+			firstParagraph.Parent().InsertBefore(firstParagraph.Parent(), firstParagraph, attentionParagraph)
 			firstParagraph.RemoveChild(firstParagraph, firstTextNode)
 			firstParagraph.RemoveChild(firstParagraph, secondTextNode)
 			firstParagraph.RemoveChild(firstParagraph, thirdTextNode)

web_src/js/components/RepoActionView.vue

@@ -3,7 +3,7 @@ import {SvgIcon} from '../svg.js';
 import ActionRunStatus from './ActionRunStatus.vue';
 import {createApp} from 'vue';
 import {toggleElem} from '../utils/dom.js';
-import {getCurrentLocale} from '../utils.js';
+import {formatDatetime} from '../utils/time.js';
 import {renderAnsi} from '../render/ansi.js';
 import {POST, DELETE} from '../modules/fetch.js';
 
@@ -167,7 +167,7 @@ const sfc = {
       const logTimeStamp = document.createElement('span');
       logTimeStamp.className = 'log-time-stamp';
       const date = new Date(parseFloat(line.timestamp * 1000));
-      const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'});
+      const timeStamp = formatDatetime(date);
       logTimeStamp.textContent = timeStamp;
       toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']);
       // for "Show seconds"

web_src/js/modules/tippy.js

@@ -1,5 +1,6 @@
 import tippy, {followCursor} from 'tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
+import {formatDatetime} from '../utils/time.js';
 
 const visibleInstances = new Set();
 
@@ -93,8 +94,15 @@ function attachTooltip(target, content = null) {
 }
 
 function switchTitleToTooltip(target) {
-  const title = target.getAttribute('title');
+  let title = target.getAttribute('title');
   if (title) {
+    // apply custom formatting to relative-time's tooltips
+    if (target.tagName.toLowerCase() === 'relative-time') {
+      const datetime = target.getAttribute('datetime');
+      if (datetime) {
+        title = formatDatetime(new Date(datetime));
+      }
+    }
     target.setAttribute('data-tooltip-content', title);
     target.setAttribute('aria-label', title);
     // keep the attribute, in case there are some other "[title]" selectors

web_src/js/utils/time.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import {getCurrentLocale} from '../utils.js';
 
 // Returns an array of millisecond-timestamps of start-of-week days (Sundays)
 export function startDaysBetween(startDate, endDate) {
@@ -44,3 +45,23 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) {
 
   return Object.values(result);
 }
+
+let dateFormat;
+
+// format a Date object to document's locale, but with 24h format from user's current locale because this
+// option is a personal preference of the user, not something that the document's locale should dictate.
+export function formatDatetime(date) {
+  if (!dateFormat) {
+    // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles` once there is broad browser support
+    dateFormat = new Intl.DateTimeFormat(getCurrentLocale(), {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      hour: 'numeric',
+      hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())),
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+  }
+  return dateFormat.format(date);
+}