[Runs table] Moves expand button to layout container and fixes sidebar scroll #6837
Conversation
| } | ||
|
|
||
| .resizer, | ||
| .expand { | ||
| .expand-collapsed-sidebar { |
There was a problem hiding this comment.
Renamed to avoid conflict with .full-screen-toggle's .expand
| color: inherit; | ||
| contain: content; | ||
| cursor: pointer; | ||
| .full-screen-toggle { |
There was a problem hiding this comment.
Copied from runs_data_table.css
(with minor edit to fix bug in current style):
| @@ -47,6 +47,26 @@ import { | |||
| [style.maxWidth.%]="(runsTableFullScreen$ | async) ? 100 : ''" | |||
| > | |||
| <ng-content select="[sidebar]"></ng-content> | |||
| <div | |||
There was a problem hiding this comment.
copied from runs_data_table.ng.html
| :host { | ||
| overflow-y: auto; | ||
| width: 100%; | ||
| & ::ng-deep tb-data-table .data-table { |
There was a problem hiding this comment.
This replaces the previous border-bottom of the .filter-row. It ensures that the entire table has a border-top, instead of just the part touching the filter row.
| @@ -18,12 +18,11 @@ $_circle-size: 20px; | |||
| $_arrow_size: 16px; | |||
There was a problem hiding this comment.
I think you can delete $_arrow_size definition here.
| @@ -25,6 +25,13 @@ import {RunsTableColumn} from '../runs_table/types'; | |||
| `, | |||
| styles: [ | |||
| ` | |||
| :host { | |||
| display: block; | |||
| height: 100%; | |||
There was a problem hiding this comment.
A minor preference: If we leave height unset then for fewer runs the horizontal scrollbar will be closer to the runs instead at the bottom of the page.
Up to you.
There was a problem hiding this comment.
I tried this out. Unfortunately this also prevents vertical scroll entirely on longer tables - the height 100% is required to constrain the long table height to enable scrolling
…r scroll (tensorflow#6837) ## Motivation for features / changes - Moving the expand button out of the runs table is required to make it compatible with the upcoming sticky add column b/332788091 - When the table is both vertically long and horizontally wide, it's very difficult to scroll horizontally: users must scroll all the way to the bottom of the table in order to access the horizontal scroll bar. b/332720882 ## Technical description of changes - Moves the "expand button" from inside the runs data table to the LayoutContainer (in the side bar). - Moves the "overflow" css property from the runs table to RunsSelectorComponent (the runs table wrapper) - Makes the runs table header sticky. This was already set, but wasn't being applied due to a missing "position: relative" parent. ## Screenshots of UI changes (or N/A) sticky header:  expand table button: 
Motivation for features / changes
Technical description of changes
Screenshots of UI changes (or N/A)
sticky header:
expand table button:
