[Logs / Metrics UI] Handle index.scss (#58219) (#58484)

* Ensure our index.scss file is handled

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -26,6 +26,7 @@ import {
   KibanaContextProvider,
 } from '../../../../../src/plugins/kibana_react/public';
 import { AppRouter } from '../routers';
+import '../index.scss';
 
 export const CONTAINER_CLASSNAME = 'infra-container-element';
 
@@ -74,12 +75,8 @@ export async function startApp(
     </KibanaContextProvider>
   );
 
-  // Ensure the element we're handed from application mounting takes up
-  // the full size it can, so that our inner application styles work as
-  // expected.
-  element.style.height = '100%';
-  element.style.display = 'flex';
-  element.style.overflowY = 'hidden'; // Prevent having scroll within a container having scroll. It messes up with drag-n-drop elements
+  // Ensure the element we're handed from application mounting is assigned a class
+  // for our index.scss styles to apply to.
   element.className += ` ${CONTAINER_CLASSNAME}`;
 
   ReactDOM.render(<App />, element);

x-pack/plugins/infra/public/index.scss

@@ -3,22 +3,13 @@
 
 /* Infra plugin styles */
 
-// Prefix all styles with "inf" to avoid conflicts.
-// Examples
-//   infChart
-//   infChart__legend
-//   infChart__legend--small
-//   infChart__legend-isLoading
-
-.infReactRoot {
+.infra-container-element {
   background-color: $euiColorEmptyShade;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  // display: flex;
-  // flex-direction: column;
   align-items: flex-start;
   flex: 1 0 auto;
   overflow-x: hidden;
@@ -27,21 +18,3 @@
   flex-direction: column;
 }
 
-// This is a temporary workaround for https://github.com/elastic/kibana/issues/39808
-// A real fix will most likely depend on changes in elastic-charts.
-
-.infrastructureChart .echTooltip {
-  max-width: 90vw;
-}
-
-.infrastructureChart .echTooltip__label {
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.metricsExplorerTitleAnchor {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline;
-}