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>"
       );

webapp/style.css

@@ -219,6 +219,7 @@ body {
   z-index: 1000;
   width: max-content;
   max-width: min(98vw, 900px);
+  min-width: 0;
   padding: 8px 12px;
   background: var(--surface);
   color: var(--text);
@@ -241,25 +242,32 @@ body {
 }
 
 .calendar-event-hint-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  display: table;
+  width: min-content;
+  table-layout: auto;
+  border-collapse: separate;
+  border-spacing: 0 2px;
 }
 
 .calendar-event-hint-row {
-  display: table;
-  width: max-content;
-  min-width: max-content;
+  display: table-row;
   white-space: nowrap;
 }
 
 .calendar-event-hint-row .calendar-event-hint-time {
   display: table-cell;
   white-space: nowrap;
-  width: 7.5em;
-  min-width: 7.5em;
+  width: 1%;
   vertical-align: top;
-  padding-right: 0.35em;
+  text-align: right;
+  padding-right: 0.15em;
+}
+
+.calendar-event-hint-row .calendar-event-hint-sep {
+  display: table-cell;
+  width: 1em;
+  vertical-align: top;
+  padding-right: 0.1em;
 }
 
 .calendar-event-hint-row .calendar-event-hint-name {