From e3a7dbe039c4343f27c3b71e9aa918f96a4543e2 Mon Sep 17 00:00:00 2001
From: Zac Ioannidis <zacoppotamus@gmail.com>
Date: Thu, 29 Oct 2020 11:21:26 +0000
Subject: [PATCH 1/4] Pin infopopup to top, let it float on top of timeline on
 reduced viewport height

---
 src/components/Layout.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 29c92e4..be1933d 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)`,
+      height: `fit-content`,
       width: '60vw',
       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'
     }
 

From ad5995b498bbddb03667bd9dcff9abe10d16ed76 Mon Sep 17 00:00:00 2001
From: Zac Ioannidis <zacoppotamus@gmail.com>
Date: Thu, 29 Oct 2020 11:21:38 +0000
Subject: [PATCH 2/4] Bump up opacity of infopopup

---
 src/scss/infopopup.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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

From 4fdfd12401ba9d8ad347f57f16b7a811ee09c0bb Mon Sep 17 00:00:00 2001
From: Zac Ioannidis <zacoppotamus@gmail.com>
Date: Thu, 29 Oct 2020 11:25:07 +0000
Subject: [PATCH 3/4] Lint fix

---
 src/components/Layout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index be1933d..818810e 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -265,7 +265,7 @@ class Dashboard extends React.Component {
       height: `fit-content`,
       width: '60vw',
       maxWidth: 600,
-      maxHeight: window.innerHeight > 768? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
+      maxHeight: window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
       top: 0,
       overflowY: 'scroll'
     }

From d1f4ade83d02c463bd52016d8d1993d2684bffdf Mon Sep 17 00:00:00 2001
From: Zac Ioannidis <zacoppotamus@gmail.com>
Date: Thu, 29 Oct 2020 11:42:00 +0000
Subject: [PATCH 4/4] Make width responsive through a CSS variable that's
 accessed in React

---
 src/components/Layout.js | 2 +-
 src/scss/_variables.scss | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 818810e..86c26e5 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -263,7 +263,7 @@ class Dashboard extends React.Component {
     const dateHeight = 80
     const popupStyles = {
       height: `fit-content`,
-      width: '60vw',
+      width: window.innerWidth > 768 ? '60vw' : `calc(100vw - var(--toolbar-width))`,
       maxWidth: 600,
       maxHeight: window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
       top: 0,
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