From 54c2b0b8dfbed9bad401d407a262f0175d5b5fb2 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 9 Mar 2021 07:33:39 -0800
Subject: [PATCH] Edit live query results table width for UI layout (#416)

- Fixes #413. Reintroduce a max-width for the.has-sidebar selector. This prevents the query results table from horizontally overflowing the screen's width.
- Adjust the positioning of the expanded live query results table to fit the new layout
---
 frontend/components/queries/QueryResultsTable/_styles.scss | 6 +++---
 frontend/styles/global/_global.scss                        | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/components/queries/QueryResultsTable/_styles.scss b/frontend/components/queries/QueryResultsTable/_styles.scss
index da7b5610eb..25fe5772fb 100644
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@@ -161,11 +161,11 @@
 
 @keyframes growFullScreen {
   100% {
-    top: $pad-half;
+    top: 60px;
     right: $pad-half;
     bottom: $pad-half;
-    left: calc(#{$nav-tablet-width} + #{$pad-half});
-    max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-half} - #{$pad-half});
+    left: $pad-half;
+    max-width: calc(100vw - #{$pad-half} - #{$pad-half});
     max-height: 100vh;
   }
 }
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 107693a8ab..033c1b3db5 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -62,6 +62,7 @@ a {
     .has-sidebar & {
       margin-right: 0;
       min-width: 610px;
+      max-width: calc(100vw - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-width});
     }
   }
 }