Bug Fix: Make axis edit button appear when prospective-fob-area is hovered (#6083)

#6081 but with only css

## Motivation for features / changes
Enabling the prospective fob feature prevents the X Axis from being
edited on the scalar card.

## Technical description of changes
The prospective fob area lies directly on top of the X Axis and thus
prevents it from being hovered.
To resolve this I used CSS reach across the components and change the
visibility of the extent edit button when the prospective fob area is
hovered.

## Screenshots of UI changes

![image](https://user-images.githubusercontent.com/78179109/204612638-29cf9008-6409-41a3-96c6-94e88c4a179b.png)


## Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Navigate to
http://localhost:6006/?enableLinkedTime=true&enableDataTable=true&allowRangeSelection=true&enableProspectiveFob=true#timeseries
3) Hover the X Axis of a scalar card
4) Assert the axis edit button appears

## Alternate designs / implementations considered
#6081
I considered reordering the DOM to place the fobs within the axis
component but thought there would be issues with the lines. While this
seems possible it doesn't seem worth the complexity.
I also considered either making hovering the entire chart cause the edit
button to appear or making only hovering the corner cause the edit
button to appear. Unfortunately I consider both of those to be a
reduction of functionality.
I also considered removing the prospective fob area and piping DOM
events from the XAxis to the card_fob_controller_component but I felt
that lead to a lot of confusing code.
https://github.com/tensorflow/tensorboard/compare/master...rileyajones:tensorboard:axis-edit-piping?expand=1

Author: rileyajones

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -57,7 +57,9 @@ limitations under the License.
   position: absolute;
   // Height/Width to match x-axis
   height: 30px;
-  width: calc(100% - 50px); // dot on the left takes up 50px
+  width: calc(
+    100% - 74px
+  ); // the dot on the left takes up 50px, the edit button takes up 24px
 }
 
 .prospective-area {

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html

@@ -16,7 +16,7 @@
 -->
 
 <div
-  [ngClass]="{'container': true, 'dark-mode': useDarkMode, 'line-only-mode': lineOnly}"
+  [ngClass]="{'container': true, 'dark-mode': useDarkMode, 'line-only-mode': lineOnly, 'line-chart': true}"
   detectResize
   (onResize)="onViewResize()"
   [resizeEventDebouncePeriodInMs]="0"

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss

@@ -215,3 +215,15 @@ $_border-style: 1px solid mat.get-color-from-palette(mat.$gray-palette, 500);
     transform-origin: center;
   }
 }
+
+// Why this weird hack?
+// The prospective fob area is absolutely positioned over the XAxis.
+// This prevents hover events from reaching the XAxis.
+// The .extent-edit-button should appear when the XAxis is hovered.
+.line-chart:has(.horizontal-prospective-area:hover) {
+  .x-axis {
+    .extent-edit-button {
+      visibility: visible;
+    }
+  }
+}

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts

@@ -18,6 +18,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  ViewEncapsulation,
 } from '@angular/core';
 import {Dimension, Formatter, Scale} from '../lib/public_types';
 import {LinearScale, TemporalScale} from '../lib/scale';
@@ -34,6 +35,9 @@ const AXIS_FONT = '11px Roboto, sans-serif';
   templateUrl: 'line_chart_axis_view.ng.html',
   styleUrls: ['line_chart_axis_view.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // This prevents the CSS generated from being namespaced thus allowing CSS
+  // to reach into the line_chart_component and card_fob_controller_component
+  encapsulation: ViewEncapsulation.None,
 })
 export class LineChartAxisComponent {
   @Input()