fix spacing issues (microsoft#4980)

Author: IanMatthewHuff

news/2 Fixes/4979.md

@@ -0,0 +1 @@
+Fix cell spacing issues

src/datascience-ui/history-react/cell.css

@@ -25,6 +25,7 @@
  grid-template-columns: auto 1fr;
  grid-column-gap: 3px;
  width: 100%;
+ margin-top:16px;
 }
 
 .content-div {
@@ -38,10 +39,6 @@
  display: grid;
 }
 
-.hide {
- visibility: hidden;
-}
-
 .cell-result-container {
  width: 100%;
 }

src/datascience-ui/history-react/code.css

@@ -31,6 +31,7 @@
 .code-area {
  position: relative;
  width:100%;
+ margin-bottom:16px;
 }
 
 .code-area-editable {
@@ -45,8 +46,3 @@
  font-style: italic;
  color: var(--override-watermark-color, var(--vscode-pickerGroup-border));
 }
-
-.hide {
- visibility: hidden;
-}
-

src/datascience-ui/history-react/collapseButton.tsx

@@ -21,7 +21,7 @@ export class CollapseButton extends React.Component<ICollapseButtonProps> {
 
  public render() {
  const collapseInputPolygonClassNames = `collapse-input-svg ${this.props.open ? ' collapse-input-svg-rotate' : ''} collapse-input-svg-${this.props.theme}`;
- const collapseInputClassNames = `collapse-input remove-style ${this.props.visible ? '' : ' hide'}`;
+ const collapseInputClassNames = `collapse-input remove-style ${this.props.visible ? '' : ' invisible'}`;
  // https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
  // Comment here just because the (boolean && statement) was new to me
  return (

src/datascience-ui/history-react/mainPanel.css

@@ -15,3 +15,11 @@
  background: var(--override-background, var(--vscode-editor-background));
  color: var(--override-foreground, var(--vscode-editor-foreground));
 }
+
+.hide {
+ display: none;
+}
+
+.invisible {
+ visibility: hidden;
+}

src/datascience-ui/history-react/variableExplorer.css

@@ -8,6 +8,3 @@
  right: 0;
  background-color: var(--vscode-editor-background);
 }
-.hide {
- display: none;
-}