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