style: improve calendar event hint layout and rendering

- Updated CSS for `.calendar-event-hint-rows` and `.calendar-event-hint-row` to enhance layout using table display properties for better alignment.
- Adjusted JavaScript in `hints.js` to modify the separator between time and name in duty marker hints, improving visual clarity.
- Ensured consistent styling and spacing for better readability of duty hints in the calendar.

webapp/js/hints.js

@@ -158,7 +158,7 @@ export function getDutyMarkerHintContent(marker) {
       const rows = getDutyMarkerRows(dutyItems, hintDay, " - ");
       body = rows
         .map((r) =>
-          r.timePrefix ? r.timePrefix + " — " + r.fullName : r.fullName
+          r.timePrefix ? r.timePrefix + " - " + r.fullName : r.fullName
         )
         .join("\n");
     } else {
@@ -186,14 +186,15 @@ export function getDutyMarkerHintHtml(marker) {
     const rows = getDutyMarkerRows(dutyItems, hintDay, nbsp);
     rowHtmls = rows.map((r) => {
       const timeHtml = r.timePrefix ? escapeHtml(r.timePrefix) : "";
-      const namePart = r.timePrefix
-        ? " — " + escapeHtml(r.fullName)
-        : escapeHtml(r.fullName);
+      const sepHtml = r.timePrefix ? '<span class="calendar-event-hint-sep">-</span>' : '<span class="calendar-event-hint-sep"></span>';
+      const nameHtml = escapeHtml(r.fullName);
       return (
         '<span class="calendar-event-hint-time">' +
         timeHtml +
-        '</span><span class="calendar-event-hint-name">' +
-        namePart +
+        "</span>" +
+        sepHtml +
+        '<span class="calendar-event-hint-name">' +
+        nameHtml +
         "</span>"
       );
     });
@@ -201,7 +202,7 @@ export function getDutyMarkerHintHtml(marker) {
     rowHtmls = (names ? names.split("\n") : []).map((fullName) => {
       const nameHtml = escapeHtml(fullName.trim());
       return (
-        '<span class="calendar-event-hint-time"></span><span class="calendar-event-hint-name">' +
+        '<span class="calendar-event-hint-time"></span><span class="calendar-event-hint-sep"></span><span class="calendar-event-hint-name">' +
         nameHtml +
         "</span>"
       );