Fix horizontal resizer in debugger (tensorflow#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.
jingweitan · Jan 3, 2019 · ac3f8d9 · ac3f8d9
1 parent a21f5b3
commit ac3f8d9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -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;