From ac3f8d9d30fd5846e4db9c7ca2597b17c00a4bd1 Mon Sep 17 00:00:00 2001
From: Stephan Lee <stephanwlee@gmail.com>
Date: Wed, 2 Jan 2019 16:17:35 -0800
Subject: [PATCH] Fix horizontal resizer in debugger (#1704)

While refactoring the dashboard layout, we inadvertently broke the
horizontal resizing capability. The resizer was clipped and was bound
by the TB global max/min-width limit on the sidebar width.
---
 .../tf-dashboard-layout.html                  |  6 ++---
 .../tf-debugger-dashboard.html                | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html b/tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html
index e56c2c70cb..d9c4869197 100644
--- a/tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html
+++ b/tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html
@@ -40,10 +40,10 @@
       }
 
       #sidebar {
-        flex: 0 0 25%;
+        flex: 0 0 var(--tf-dashboard-layout-sidebar-basis, 25%);
         height: 100%;
-        max-width: 350px;
-        min-width: 270px;
+        max-width: var(--tf-dashboard-layout-sidebar-max-width, 350px);
+        min-width: var(--tf-dashboard-layout-sidebar-min-width, 270px);
         overflow-y: auto;
         text-overflow: ellipsis;
       }
diff --git a/tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html b/tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html
index fab8beef4e..7bf8af1f8d 100644
--- a/tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html
+++ b/tensorboard/plugins/debugger/tf_debugger_dashboard/tf-debugger-dashboard.html
@@ -202,6 +202,11 @@
         width: 40vw;
         margin-left: 30vw;
       }
+      tf-dashboard-layout {
+        --tf-dashboard-layout-sidebar-basis: auto;
+        --tf-dashboard-layout-sidebar-max-width: unset;
+        --tf-dashboard-layout-sidebar-min-width: unset;
+      }
       .debugger-section-title {
         font-size: 110%;
         font-weight: bold;
@@ -271,13 +276,17 @@
         margin: 80px auto 0 auto;
       }
       .sidebar {
-        position: relative;
         height: 100%;
+        overflow-x: visible;
+        position: relative;
       }
       .center {
         position: relative;
         height: 100%;
       }
+      tf-debugger-resizer {
+        right: -10px;
+      }
       #center-content {
         position: absolute;
         right: 0;
@@ -301,15 +310,16 @@
         vertical-align: middle;
       }
       .node-entries {
-        position: relative;
+        box-shadow: 3px 3px #ddd;
+        box-sizing: border-box;
         height: 80%;
-        width: 100%;
-        vertical-align: top;
         overflow: auto;
-        padding-top: 3px;
         padding-left: 3px;
         padding-right: 3px;
-        box-shadow: 3px 3px #ddd;
+        padding-top: 3px;
+        position: relative;
+        vertical-align: top;
+        width: 100%;
       }
       .source-code-view-div {
         position: relative;