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/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 {