Logs Panel: Performance issue while scrolling within panel in safari (#74694)

* adding contain:strict to let browsers know the layout of logs panel can be rendered independently

* add new prop to allow LogRow component to contain content

public/app/features/logs/components/LogRows.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import React, { PureComponent } from 'react';
 
@@ -53,6 +54,11 @@ export interface Props extends Themeable2 {
   isFilterLabelActive?: (key: string, value: string, refId?: string) => Promise<boolean>;
   pinnedRowId?: string;
   containerRendered?: boolean;
+  /**
+   * If false or undefined, the `contain:strict` css property will be added to the wrapping `<table>` for performance reasons.
+   * Any overflowing content will be clipped at the table boundary.
+   */
+  overflowingContent?: boolean;
 }
 
 interface State {
@@ -128,7 +134,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
     const keyMaker = new UniqueKeyMaker();
 
     return (
-      <table className={styles.logsRowsTable}>
+      <table className={cx(styles.logsRowsTable, this.props.overflowingContent ? '' : styles.logsRowsTableContain)}>
         <tbody>
           {hasData &&
             firstRows.map((row) => (

public/app/features/logs/components/getLogRowStyles.ts

@@ -74,6 +74,9 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       width: 100%;
       ${!scrollableLogsContainer && `margin-bottom: ${theme.spacing(2.25)};`}
     `,
+    logsRowsTableContain: css`
+      contain: strict;
+    `,
     highlightBackground: css`
       background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
     `,

public/app/features/logs/components/log-context/LogRowContextModal.tsx

@@ -552,6 +552,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
                   onUnpinLine={() => setSticky(false)}
                   onPinLine={() => setSticky(true)}
                   pinnedRowId={sticky ? row.uid : undefined}
+                  overflowingContent={true}
                 />
               </td>
             </tr>