Fix graphical event overflow.

2 files changed, 21 insertions, 8 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index feb68795..8fbd4286 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -230,14 +230,18 @@
                                   (eq? 'TENTATIVE (prop ev 'PARTSTAT)))
                          " tentative"))
                     (onclick "toggle_child_popup(this)"))))
-            ,(when (prop ev 'RRULE)
-               `(span (@ (class "repeating")) "↺"))
-            (span (@ (class "summary"))
-                  ,((get-config 'summary-filter) ev (prop ev 'SUMMARY)))
-            ,(when (prop ev 'LOCATION)
-               `(span (@ (class "location"))
-                      ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
-                                   (prop ev 'LOCATION))))
+            ;; Inner div to prevent overflow. Previously "overflow: none"
+            ;; was set on the surounding div, but the popup /needs/ to
+            ;; overflow.
+            (div (@ (class "event-body"))
+             ,(when (prop ev 'RRULE)
+                `(span (@ (class "repeating")) "↺"))
+             (span (@ (class "summary"))
+                   ,((get-config 'summary-filter) ev (prop ev 'SUMMARY)))
+             ,(when (prop ev 'LOCATION)
+                `(span (@ (class "location"))
+                       ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
+                                    (prop ev 'LOCATION)))))
             ,(popup ev popup-id)))))
 
 ;; Format single event for graphical display
@@ -822,6 +826,7 @@
                                       `((class " generated ")
                                         (style " width: calc(100% * var(--editmode)) ")))))))))))
 
+
 
 ;; file existing but is of wrong type,
 (define (create-files)
diff --git a/static/style.css b/static/style.css
index 56e3763b..7cd36522 100644
--- a/static/style.css
+++ b/static/style.css
@@ -491,6 +491,14 @@ along with their colors.
     overflow: visible;
 }
 
+.event-body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
 .days .event {
     border: 1px solid black;
 }