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/app.js

@@ -216,6 +216,46 @@
     bindInfoButtonTooltips();
   }
 
+  function positionHint(hintEl, btnRect) {
+    var vw = document.documentElement.clientWidth;
+    var margin = 12;
+    hintEl.classList.remove("below");
+    hintEl.style.left = btnRect.left + "px";
+    hintEl.style.top = (btnRect.top - 4) + "px";
+    hintEl.hidden = false;
+    requestAnimationFrame(function () {
+      var hintRect = hintEl.getBoundingClientRect();
+      var left = parseFloat(hintEl.style.left);
+      var top = parseFloat(hintEl.style.top);
+      if (hintRect.top < margin) {
+        hintEl.classList.add("below");
+        top = btnRect.bottom + 4;
+      }
+      if (hintRect.right > vw - margin) {
+        left = vw - hintRect.width - margin;
+      }
+      if (left < margin) {
+        left = margin;
+      }
+      left = Math.min(left, vw - hintRect.width - margin);
+      hintEl.style.left = left + "px";
+      hintEl.style.top = top + "px";
+      if (hintEl.classList.contains("below")) {
+        requestAnimationFrame(function () {
+          hintRect = hintEl.getBoundingClientRect();
+          left = parseFloat(hintEl.style.left);
+          if (hintRect.right > vw - margin) {
+            left = vw - hintRect.width - margin;
+          }
+          if (left < margin) {
+            left = margin;
+          }
+          hintEl.style.left = left + "px";
+        });
+      }
+    });
+  }
+
   function bindInfoButtonTooltips() {
     var hintEl = document.getElementById("calendarEventHint");
     if (!hintEl) {
@@ -232,10 +272,8 @@
         var summary = btn.getAttribute("data-summary") || "";
         if (hintEl.hidden || hintEl.textContent !== summary) {
           hintEl.textContent = summary;
-          hintEl.hidden = false;
           var rect = btn.getBoundingClientRect();
-          hintEl.style.left = (rect.left + window.scrollX) + "px";
-          hintEl.style.top = (rect.top + window.scrollY - 4) + "px";
+          positionHint(hintEl, rect);
           hintEl.dataset.active = "1";
         } else {
           hintEl.hidden = true;

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