diff --git a/webapp/js/hints.js b/webapp/js/hints.js
index 2377095..e54446e 100644
--- a/webapp/js/hints.js
+++ b/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>"
       );
diff --git a/webapp/style.css b/webapp/style.css
index e6ea5b9..5f3d78e 100644
--- a/webapp/style.css
+++ b/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 {