Fix css issues with fullscreen where bottom bar was hidden

src/browser/modules/D3Visualization/components/Graph.tsx

@@ -134,7 +134,7 @@ export class GraphComponent extends Component<any, State> {
 
   zoomButtons() {
     return (
-      <StyledZoomHolder>
+      <StyledZoomHolder fullscreen={this.props.fullscreen}>
         <StyledZoomButton
           className={
             this.state.zoomInLimitReached ? 'faded zoom-in' : 'zoom-in'

src/browser/modules/D3Visualization/components/Inspector.tsx

@@ -216,7 +216,10 @@ export class InspectorComponent extends Component<
     }
 
     return (
-      <StyledStatusBar className="status-bar">
+      <StyledStatusBar
+        fullscreen={this.props.fullscreen}
+        className="status-bar"
+      >
         <StyledStatus className="status">
           <StyledInspectorFooter
             className={

src/browser/modules/D3Visualization/components/styled.tsx

@@ -181,12 +181,13 @@ export const StyledStatusBarWrapper = styled.div`
   display: none;
 `
 
-export const StyledStatusBar = styled.div`
+export const StyledStatusBar = styled.div<{ fullscreen?: boolean }>`
   min-height: 39px;
   line-height: 39px;
   color: ${props => props.theme.secondaryText};
   font-size: 13px;
-  position: absolute;
+  position: ${props => (props.fullscreen ? 'fixed' : 'absolute')};
+  z-index: ${props => (props.fullscreen ? 1 : 'auto')};
   background-color: ${props => props.theme.frameBackground};
   white-space: nowrap;
   overflow: hidden;
@@ -337,8 +338,8 @@ export const StyledInspectorFooterStatusMessage = styled.div`
   font-weight: bold;
 `
 
-export const StyledZoomHolder = styled.div`
-  position: absolute;
+export const StyledZoomHolder = styled.div<{ fullscreen: boolean }>`
+  position: ${props => (props.fullscreen ? 'fixed' : 'absolute')};
   bottom: 39px;
   right: 0;
   padding: 6px 6px 0 6px;

src/browser/modules/Frame/FrameTemplate.tsx

@@ -134,16 +134,16 @@ function FrameTemplate({
             </StyledFrameContents>
           </StyledFrameMainSection>
         </StyledFrameBody>
-      </ContentContainer>
 
-      {statusbar && (
-        <StyledFrameStatusbar
-          fullscreen={isFullscreen}
-          data-testid="frameStatusbar"
-        >
-          {statusbar}
-        </StyledFrameStatusbar>
-      )}
+        {statusbar && (
+          <StyledFrameStatusbar
+            fullscreen={isFullscreen}
+            data-testid="frameStatusbar"
+          >
+            {statusbar}
+          </StyledFrameStatusbar>
+        )}
+      </ContentContainer>
     </StyledFrame>
   )
 }

src/browser/modules/Frame/styled.tsx

@@ -47,9 +47,10 @@ z-index: 130;`
 `
 
 export const StyledFrameBody = styled.div<
-  FullscreenProps & { collapsed: boolean }
+  FullscreenProps & { collapsed: boolean; preventOverflow?: boolean }
 >`
-  overflow: auto;
+  flex: 1;
+  overflow: ${props => (props.preventOverflow ? 'hidden' : 'auto')};
   min-height: ${dim.frameBodyHeight / 2}px;
   max-height: ${props => {
     if (props.collapsed) {
@@ -123,7 +124,6 @@ export const StyledFrameContents = styled.div<FullscreenProps>`
 export const StyledFrameStatusbar = styled.div<FullscreenProps>`
   border-top: ${props => props.theme.inFrameBorder};
   height: ${dim.frameStatusbarHeight - 1}px;
-  ${props => (props.fullscreen ? 'margin-top: -78px;' : '')};
   display: flex;
   flex-direction: row;
   flex: none;
@@ -195,6 +195,9 @@ export const StyledFrameCommand = styled.label<{ selectedDb: string | null }>`
 export const ContentContainer = styled.div`
   margin: 0px 3px;
   padding: 2px 2px 0 2px;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 23px);
 `
 
 export const TitleBarHeader = styled.div`

src/browser/modules/Stream/CypherFrame/CypherFrame.tsx

@@ -307,6 +307,7 @@ export class CypherFrame extends Component<CypherFrameProps, CypherFrameState> {
         data-testid="frame-loaded-contents"
         fullscreen={this.state.fullscreen}
         collapsed={this.state.collapse}
+        preventOverflow={this.state.openView === viewTypes.VISUALIZATION}
       >
         <Display if={this.state.openView === viewTypes.TEXT} lazy>
           <AsciiView
@@ -348,6 +349,7 @@ export class CypherFrame extends Component<CypherFrameProps, CypherFrameState> {
         </Display>
         <Display if={this.state.openView === viewTypes.VISUALIZATION} lazy>
           <VisualizationConnectedBus
+            fullscreen={this.state.fullscreen}
             result={result}
             updated={this.props.request.updated}
             frameHeight={this.state.frameHeight}

src/browser/modules/Stream/CypherFrame/VisualizationView.styled.tsx

@@ -23,8 +23,6 @@ import { dim } from 'browser-styles/constants'
 
 export const StyledVisContainer = styled.div<{ fullscreen: boolean }>`
   width: 100%;
-  overflow: hidden;
-  ${props => (props.fullscreen ? 'padding-bottom: 39px' : null)};
   height: ${props =>
     props.fullscreen
       ? '100vh'

src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Visualization renders 1`] = `<div />`;
 exports[`Visualization renders with result and escapes any HTML 1`] = `
 <div>
   <div
-    class="sc-bwCtUz bxryAr"
+    class="sc-bwCtUz hJgGYC"
   >
     <div
       class="sc-iAyFgw ikvPvE one-legend-row"
@@ -152,7 +152,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         </div>
       </div>
       <div
-        class="sc-gqjmRU dwJWly status-bar"
+        class="sc-gqjmRU iNDOUA status-bar"
       >
         <div
           class="sc-VigVT joQvFy status"