Enhance tooltip positioning and styling for calendar events

- Introduced a new function `positionHint` to dynamically position the event hint tooltip based on button location and viewport constraints.
- Updated tooltip CSS to allow for responsive width and added a new style for tooltips positioned below the button.
- Improved tooltip visibility logic to ensure it remains within the viewport while providing a better user experience.

webapp/style.css

@@ -143,7 +143,8 @@ body {
 .calendar-event-hint {
   position: fixed;
   z-index: 1000;
-  max-width: 280px;
+  width: max-content;
+  max-width: min(280px, calc(100vw - 24px));
   padding: 8px 12px;
   background: var(--surface);
   color: var(--text);
@@ -156,6 +157,10 @@ body {
   transform: translateY(-100%);
 }
 
+.calendar-event-hint.below {
+  transform: none;
+}
+
 .day-duties {
   font-size: 0.6rem;
   color: var(--duty);