Column Customization: Fix scroll bar appearing when not needed (#6339)

## Motivation for features / changes
This PR fixes a bug where the scroll bar would appear when it was not
needed. It appeared because one of the divs inside the mat-tab-group did
not grow properly which causes a slight bit of overflow.

## Technical description of changes
Since the div which is not growing is built inside the mat-tab-group the
only way to access it is to apply ng-deep

## Screenshots of UI changes
before
<img width="224" alt="Screenshot 2023-04-20 at 12 00 55 PM"
src="https://user-images.githubusercontent.com/8672809/233463005-3e9479e0-e61a-4585-9f29-e916cfd77850.png">
after
<img width="233" alt="Screenshot 2023-04-20 at 12 00 46 PM"
src="https://user-images.githubusercontent.com/8672809/233463008-ad90cfc4-88bd-4a96-a7bb-73aca53278e5.png">

Author: JamesHollyer

tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss

@@ -78,3 +78,13 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
     color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 }
+
+// Make the mat-tab-body-wrapper fill the height of its parent. When flex-grow
+// is 0 this element tries to wrap its content but, mysteriously it does so
+// incorrectly. This works around that by making the element fill the full area
+// allowed for the tab content. Then the child element can correctly decide when
+// a scroll bar is needed. This class is added to a div internal to the
+// mat-tab-group.
+::ng-deep .mat-tab-body-wrapper {
+  flex: 1;
+}