1 files changed, 16 insertions, 45 deletions

diff --git a/static/style.css b/static/style.css
index ac490322..aad9a80c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -396,6 +396,9 @@ along with their colors.
     height: 100%;
     padding: 0;
     overflow-x: scroll;
+
+    /* allow for popup placement */
+    position: relative;
 }
 
 .events {
@@ -456,6 +459,7 @@ along with their colors.
 .event {
     transition: 0.3s;
     font-size: var(--event-font-size);
+    overflow: hidden;
 }
 
 .days .event {
@@ -464,8 +468,6 @@ along with their colors.
 
 .events .event {
     width: 100%;
-
-
 }
 
 .events .event.continuing {
@@ -581,60 +583,35 @@ along with their colors.
 .clock-22 { top: calc(100%/24 * 22); }
 .clock-24 { top: calc(100%/24 * 24); }
 
-.event-inner {
-    /* Makes the popup's "position: absolute" be relative the event.
-        unset, initial, and inherit all seem to work */
-    position: unset;
-    width: 100%;
-    height: 100%;
-}
 
 /* Popups
 ----------------------------------------
 */
 
-.event-inner .popup {
-    /* TODO & NOTE
-       If I understand it correctly this is absolute to the nearest offset parent.
-       since .event-inner has a position: unset the offset parent becomes
-       - event for week view, and
-       - body for month view.
-       This has the effect that top and left attributes become relative the offset
-       parent (even though without them the element is positioned relative to it's
-       direct event parent (except not in month view if the day is scrolled)).
-
-       I think it's something here which stops popups in the month view from going
-       of the edge of the screen. I just want the same thing to be true for the
-       week view, since it's REALY ugly when a popup makes the calendar wider.
-   */
-    position: absolute;
-    display: flex;
-    /* A scale(0%) is chosen for hiding the element for the following reasons:
-       - visibility: hidden still reserves space, which causes unwanted scroll-
-         bars since the final position of the popup is calculated at runtime
-       - Easier animation
-   */
-    transform: scale(0);
-    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-    z-index: 100;
+.popup-container {
+    display: none;
+}
+
 
+.popup {
+    display: flex;
     background-color: #dedede;
     color: black;
 
     overflow-y: auto;
-    max-width: 100ch;
+    max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
 }
 
-.event-inner .popup article {
+.popup article {
     /* makes the text in the popup scroll, but not the sidebar */
     overflow-y: auto;
-
     padding: 1em;
+    word-break: break-word;
 }
 
-.event-inner .popup .location {
+.popup .location {
     font-style: initial;
 }
 
@@ -659,14 +636,8 @@ along with their colors.
     font-size: 150%;
 }
 
-.popup.show {
-    transform: scale(1);
-}
-
-.event-inner .body {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+.tpd-tooltip a, .tpd-tooltip a:hover {
+    color: blue;
 }
 
 #bar {