Add patch style for oui fixed components

public/chat_header_button.tsx

@@ -24,6 +24,7 @@ import {
 } from './utils/constants';
 import { useCore } from './contexts/core_context';
 import { MountPointPortal } from '../../../src/plugins/opensearch_dashboards_react/public';
+import { usePatchFixedStyle } from './hooks/use_patch_fixed_style';
 
 interface HeaderChatButtonProps {
   application: ApplicationStart;
@@ -52,6 +53,7 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
   const core = useCore();
   const flyoutFullScreen = sidecarDockedMode === SIDECAR_DOCKED_MODE.TAKEOVER;
   const flyoutMountPoint = useRef(null);
+  usePatchFixedStyle();
 
   useEffectOnce(() => {
     const subscription = props.application.currentAppId$.subscribe((id) => setAppId(id));

public/hooks/use_patch_fixed_style.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { useEffect, useRef } from 'react';
+
+import { useCore } from '../contexts/core_context';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../../../../src/core/public';
+
+// There are some UI components from library whose position is fixed and are not compatible with each other and also not compatible with sidecar container.
+// There is currently no way to provide config for these components at runtime.
+// This hook patches a style for all these already known components to make them compatible with sidecar.
+// TODO: Use config provider from UI library to make this more reasonable.
+export const usePatchFixedStyle = () => {
+  const core = useCore();
+  const sidecarConfig$ = core.overlays.sidecar().getSidecarConfig$();
+  const textRef = useRef<Text>();
+
+  useEffect(() => {
+    const css = '';
+    const style = document.createElement('style');
+    const text = document.createTextNode(css);
+    document.head.appendChild(style);
+    style.appendChild(text);
+
+    textRef.current = text;
+
+    const subscription = sidecarConfig$.subscribe((config) => {
+      if (!config) return;
+      updateHeadStyle(config, textRef.current);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+};
+
+function updateHeadStyle(config: ISidecarConfig, text?: Text) {
+  let css = '';
+  if (!text) return;
+
+  if (
+    // When sidecar is opened and docked position is left or right, we should patch style.
+    config?.isHidden !== true &&
+    config.paddingSize &&
+    (config.dockedMode === SIDECAR_DOCKED_MODE.LEFT ||
+      config.dockedMode === SIDECAR_DOCKED_MODE.RIGHT)
+  ) {
+    const { dockedMode, paddingSize } = config;
+    if (dockedMode === SIDECAR_DOCKED_MODE.RIGHT) {
+      // Current applied components include flyout and bottomBar.
+      // Although the class names of actual rendered component start with eui. We will also apply oui for fallback.
+      css = `
+        .euiFlyout:not(.euiFlyout--left) {
+           right: ${paddingSize}px
+        }
+        .ouiFlyout:not(.ouiFlyout--left) {
+          right: ${paddingSize}px
+       }
+        .euiBottomBar{
+            padding-right: ${paddingSize}px
+        }
+        .ouiBottomBar{
+          padding-right: ${paddingSize}px
+      }
+        `;
+    } else if (dockedMode === SIDECAR_DOCKED_MODE.LEFT) {
+      css = `
+        .euiFlyout--left {
+           left: ${paddingSize}px
+        }
+        .ouiFlyout--left {
+          left: ${paddingSize}px
+       }
+        .euiBottomBar{
+            padding-left: ${paddingSize}px
+        }
+        .ouiBottomBar{
+          padding-left: ${paddingSize}px
+      }
+        `;
+    }
+  }
+
+  // If sidecar closes or docked direction change to takeover mode, we will keep css empty to remove patch style and update.
+  requestAnimationFrame(() => {
+    text.textContent = css;
+  });
+}