Make width responsive through a CSS variable that's accessed in React

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,

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