From 045cab5cf9c9dc9c16982206d9d5b3cccaad41aa Mon Sep 17 00:00:00 2001
From: Stephan Lee <stephanwlee@gmail.com>
Date: Thu, 28 Oct 2021 13:13:57 -0700
Subject: [PATCH] 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.
---
 .../webapp/core/views/layout_container.scss      | 16 +++++++++++++---
 .../webapp/core/views/layout_container.ts        |  4 +---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/tensorboard/webapp/core/views/layout_container.scss b/tensorboard/webapp/core/views/layout_container.scss
index 3cd792ff35b..803b4111e8c 100644
--- a/tensorboard/webapp/core/views/layout_container.scss
+++ b/tensorboard/webapp/core/views/layout_container.scss
@@ -30,15 +30,14 @@ 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;
@@ -46,6 +45,17 @@ limitations under the License.
   .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 {
diff --git a/tensorboard/webapp/core/views/layout_container.ts b/tensorboard/webapp/core/views/layout_container.ts
index bb031c21a9f..b1d64f51897 100644
--- a/tensorboard/webapp/core/views/layout_container.ts
+++ b/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'],