Fix toolbar height and add cell line (#7499)

* Fix toolbar height and add cell line

* Fix toolbar margin

Author: rchiodo

news/2 Fixes/7489.md

@@ -0,0 +1 @@
+Fix collapse bar and add new line spacing for the native editor.

package-lock.json

@@ -151,22 +151,22 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
         const content = this.isMarkdownCell() && !this.state.showingMarkdownEditor ?
             <div className='cell-result-container'>
                 <div className='cell-row-container'>
-                    {this.renderCollapseBar(false)}
+                    {this.renderCollapseBar(false, false)}
                     {this.renderOutput()}
                 </div>
                 {this.renderAddDivider(false)}
                 {this.renderMiddleToolbar()}
             </div> :
             <div className='cell-result-container'>
                 <div className='cell-row-container'>
-                    {this.renderCollapseBar(true)}
+                    {this.renderCollapseBar(true, false)}
                     {this.renderControls()}
                     {this.renderInput()}
                 </div>
                 {this.renderAddDivider(true)}
                 {this.renderMiddleToolbar()}
                 <div className='cell-row-container'>
-                    {this.renderCollapseBar(false)}
+                    {this.renderCollapseBar(false, false)}
                     {this.renderOutput()}
                 </div>
             </div>;
@@ -588,6 +588,8 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
             </ImageButton>;
 
         return (
+            <div className='cell-row-container'>
+            {this.renderCollapseBar(true, true)}
             <div className='native-editor-celltoolbar-middle'>
                 <ImageButton baseTheme={this.props.baseTheme} onClick={runAbove} disabled={!canRunAbove} tooltip={getLocString('DataScience.runAbove', 'Run cells above')}>
                     <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.RunAbove} />
@@ -600,6 +602,7 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
                     <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.Delete} />
                 </ImageButton>
             </div>
+            </div>
         );
     }
 
@@ -716,9 +719,13 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
         }
     }
 
-    private renderCollapseBar = (input: boolean) => {
+    private renderCollapseBar = (input: boolean, skipHover: boolean) => {
         let classes = 'collapse-bar';
 
+        if (skipHover) {
+            classes += ' collapse-bar-skip-hover';
+        }
+
         if (this.props.selectedCell === this.props.cellVM.cell.id && this.props.focusedCell !== this.props.cellVM.cell.id) {
             classes += ' collapse-bar-selected';
         }

src/datascience-ui/native-editor/nativeCell.tsx

@@ -162,7 +162,7 @@
     display: flex;
     justify-items: left;
     visibility: collapse;
-    margin-left: 50px;
+    margin: 0px 0px 0px 40px;
 }
 
 .cell-wrapper:hover .navbar-div {
@@ -345,6 +345,10 @@
     background-color: var(--override-widget-background, var(--vscode-notifications-background));
 }
 
+.cell-wrapper:hover .collapse-bar-skip-hover {
+    background-color: transparent
+}
+
 .collapse-bar-markdown {
     margin: 0px 44px 0px 0px;
 }
@@ -383,8 +387,9 @@
 
 .add-divider {
     visibility: hidden;
-    position: relative;
-    top: 12px;
+    margin: 0px;
+    position: absolute;
+    bottom: 8px;
 }
 
 .cell-wrapper:hover .add-divider {