layout: make resizer smaller

Previously, we used to have a little icon and thick vertical bar to make
resize affordance apparent on the left pane resizer. After surveying
modern apps, it looks like they are often done with pointer in
combination with thicker vertical bar on hover so we adopt those
designs.

In the end, with this change, we give users about 18 pixels back in the
horizontal space.

Author: stephanwlee

tensorboard/webapp/core/views/layout_container.scss

@@ -30,22 +30,32 @@ limitations under the License.
 .expand {
   @include tb-theme-foreground-prop(border-color, border);
   box-sizing: border-box;
-  flex: 0 0 20px;
+  flex: 0 0;
   justify-self: stretch;
-  width: 20px;
 }
 
 .resizer {
   align-items: center;
   border-style: solid;
-  border-width: 0 1px;
+  border-width: 0 2px;
   cursor: ew-resize;
   display: flex;
   justify-self: stretch;
 
   .mat-icon {
     width: 100%;
   }
+
+  &:hover {
+    border-color: #ccc;
+    outline: 3px solid #ccc;
+    z-index: 1;
+
+    @include tb-dark-theme {
+      outline-color: #777;
+      border-color: #777;
+    }
+  }
 }
 
 .expand {

tensorboard/webapp/core/views/layout_container.ts

@@ -49,9 +49,7 @@ import {MouseEventButtons} from '../../util/dom';
       *ngIf="(width$ | async) > 0"
       class="resizer"
       (mousedown)="resizeGrabbed()"
-    >
-      <mat-icon svgIcon="drag_indicator_24px"></mat-icon>
-    </div>
+    ></div>
     <ng-content select="[main]"></ng-content>
   `,
   styleUrls: ['layout_container.css'],