diff --git a/src/components/Layout.js b/src/components/Layout.js
index 29c92e4..86c26e5 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -262,10 +262,11 @@ class Dashboard extends React.Component {
 
     const dateHeight = 80
     const popupStyles = {
-      height: `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`,
-      width: '60vw',
+      height: `fit-content`,
+      width: window.innerWidth > 768 ? '60vw' : `calc(100vw - var(--toolbar-width))`,
       maxWidth: 600,
-      bottom: app.timeline.dimensions.height + dateHeight,
+      maxHeight: window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
+      top: 0,
       overflowY: 'scroll'
     }
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 3a71324..dc18a11 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -64,3 +64,8 @@ $vimeo-height: $panel-height / 2;
 $banner-height: 100px;
 $padding: 20px;
 $header-inset: 10px;
+
+// CSS variables (for React access)
+:root {
+  --toolbar-width: 110px;
+}
\ No newline at end of file
diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss
index 79e019b..de70327 100644
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -36,7 +36,8 @@
   }
 
   &.dark {
-    background: $black-transparent;
+    // background: $black-transparent;
+    background: rgba(0,0,0,0.8);
     color: white;
   }