diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts
index 2e1f3decbd9..32900b5367b 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts
@@ -659,8 +659,10 @@ export type CodeEditorToolbarProps = {
 // Omit the ref as we have our own ref type, which is completely different
 export type BasicCodeEditorProps = Partial<Omit<PfCodeEditorProps, 'ref'>>;
 
-export type CodeEditorProps = Omit<BasicCodeEditorProps, 'code'> &
+export type CodeEditorProps = Omit<BasicCodeEditorProps, 'code' | 'shortcutsPopoverProps'> &
   CodeEditorToolbarProps & {
+    /** Additional props to override the default popover properties */
+    shortcutsPopoverProps?: Partial<PfCodeEditorProps['shortcutsPopoverProps']>;
     /** Code displayed in code editor. */
     value?: string;
     /** Minimum editor height in valid CSS height values. */
diff --git a/frontend/packages/console-shared/locales/en/console-shared.json b/frontend/packages/console-shared/locales/en/console-shared.json
index 0a720d3fe7c..37237ca57e4 100644
--- a/frontend/packages/console-shared/locales/en/console-shared.json
+++ b/frontend/packages/console-shared/locales/en/console-shared.json
@@ -124,6 +124,8 @@
   "View document outline": "View document outline",
   "View property descriptions": "View property descriptions",
   "Save": "Save",
+  "Hide sidebar": "Hide sidebar",
+  "Show sidebar": "Show sidebar",
   "Restricted access": "Restricted access",
   "You don't have access to this section due to cluster policy": "You don't have access to this section due to cluster policy",
   "Error details": "Error details",
diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx b/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx
index 29015c0ee4e..0ab8ec7e549 100644
--- a/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx
+++ b/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx
@@ -15,7 +15,7 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref)
   const [monacoRef, setMonacoRef] = React.useState<CodeEditorRef['monaco'] | null>(null);
   const [usesValue] = React.useState<boolean>(value !== undefined);
 
-  const shortcutPopover = useShortcutPopover();
+  const shortcutPopover = useShortcutPopover(props.shortcutsPopoverProps);
 
   const editorDidMount: EditorDidMount = React.useCallback(
     (editor, monaco) => {
@@ -55,7 +55,7 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref)
   // do not render toolbar if the component is null
   const ToolbarLinks = React.useMemo(() => {
     return showShortcuts || toolbarLinks?.length ? (
-      <CodeEditorToolbar toolbarLinks={toolbarLinks} showShortcuts={showShortcuts} />
+      <CodeEditorToolbar toolbarLinks={toolbarLinks} />
     ) : undefined;
   }, [toolbarLinks, showShortcuts]);
 
@@ -80,11 +80,11 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref)
     <div style={{ minHeight }} className="ocs-yaml-editor">
       <BasicCodeEditor
         {...props}
-        language={props?.language ?? Language.yaml}
+        language={props.language ?? Language.yaml}
         code={value}
-        options={{ ...defaultEditorOptions, ...props?.options }}
+        options={{ ...defaultEditorOptions, ...props.options }}
         onEditorDidMount={editorDidMount}
-        isFullHeight={props?.isFullHeight ?? true}
+        isFullHeight={props.isFullHeight ?? true}
         customControls={ToolbarLinks ?? undefined}
         shortcutsPopoverProps={showShortcuts ? shortcutPopover : undefined}
       />
diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
index 3d91ef5a26f..b2e7549bdb3 100644
--- a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
+++ b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
@@ -1,49 +1,40 @@
-import * as React from 'react';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
 import { MagicIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { action } from 'typesafe-actions';
 import { CodeEditorToolbarProps } from '@console/dynamic-plugin-sdk';
 import { ActionType } from '@console/internal/reducers/ols';
-import { useOLSConfig } from '../../hooks/ols-hook';
+import { useOLSConfig } from '@console/shared/src/hooks/ols-hook';
+import { useIsFullscreen } from '@console/shared/src/hooks/useFullscreen';
 
-export const AskOpenShiftLightspeedButton: React.FC = () => {
+export const AskOpenShiftLightspeedButton: React.FCC = () => {
   const { t } = useTranslation('console-shared');
   const openOLS = () => action(ActionType.OpenOLS);
   const showLightspeedButton = useOLSConfig();
   const dispatch = useDispatch();
+  const isFullscreen = useIsFullscreen();
 
   return showLightspeedButton ? (
-    <Button
-      variant="secondary"
-      size="sm"
-      onClick={() => {
-        dispatch(openOLS());
-      }}
-      icon={<MagicIcon />}
-    >
-      {t('console-shared~Ask OpenShift Lightspeed')}
-    </Button>
+    <Tooltip content={t('Ask OpenShift Lightspeed')}>
+      <Button
+        isDisabled={isFullscreen}
+        variant="plain"
+        onClick={() => dispatch(openOLS())}
+        aria-label={t('Ask OpenShift Lightspeed')}
+        icon={<MagicIcon />}
+      />
+    </Tooltip>
   ) : null;
 };
 
-export const CodeEditorToolbar: React.FC<CodeEditorToolbarProps> = ({
-  showShortcuts,
-  toolbarLinks,
-}) => {
-  if (!showShortcuts && !toolbarLinks?.length) return null;
+export const CodeEditorToolbar: React.FCC<CodeEditorToolbarProps> = ({ toolbarLinks }) => {
+  if (!toolbarLinks?.length) return null;
+
   return (
     <>
       <AskOpenShiftLightspeedButton />
-
-      <Flex className="pf-v6-u-ml-xs" alignItems={{ default: 'alignItemsCenter' }}>
-        {toolbarLinks &&
-          toolbarLinks.map((link, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <FlexItem key={`${index}`}>{link}</FlexItem>
-          ))}
-      </Flex>
+      {toolbarLinks}
     </>
   );
 };
diff --git a/frontend/packages/console-shared/src/components/editor/ShortcutsPopover.tsx b/frontend/packages/console-shared/src/components/editor/ShortcutsPopover.tsx
index b1365203dfa..4989923586c 100644
--- a/frontend/packages/console-shared/src/components/editor/ShortcutsPopover.tsx
+++ b/frontend/packages/console-shared/src/components/editor/ShortcutsPopover.tsx
@@ -1,33 +1,36 @@
+import { useMemo } from 'react';
 import { PopoverProps } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ShortcutTable, Shortcut } from '../shortcuts';
 import { isMac } from '../shortcuts/Shortcut';
 
-export const useShortcutPopover = (onHideShortcuts?: () => {}): PopoverProps => {
+export const useShortcutPopover = (shortcutsPopoverProps?: Partial<PopoverProps>): PopoverProps => {
   const { t } = useTranslation('console-shared');
 
-  return {
-    'aria-label': t('Shortcuts'),
-    bodyContent: (
-      <ShortcutTable>
-        <Shortcut keyName="F1">{t('View all editor shortcuts')}</Shortcut>
-        <Shortcut ctrl keyName="space">
-          {t('Activate auto complete')}
-        </Shortcut>
-        <Shortcut ctrl shift={isMac} keyName="m">
-          {t('Toggle Tab action between insert Tab character and move focus out of editor')}
-        </Shortcut>
-        <Shortcut ctrlCmd shift keyName="o">
-          {t('View document outline')}
-        </Shortcut>
-        <Shortcut hover>{t('View property descriptions')}</Shortcut>
-        <Shortcut ctrlCmd keyName="s">
-          {t('Save')}
-        </Shortcut>
-      </ShortcutTable>
-    ),
-    maxWidth: '25rem',
-    distance: 18,
-    onHide: onHideShortcuts,
-  };
+  return useMemo((): PopoverProps => {
+    return {
+      'aria-label': t('Shortcuts'),
+      bodyContent: (
+        <ShortcutTable>
+          <Shortcut keyName="F1">{t('View all editor shortcuts')}</Shortcut>
+          <Shortcut ctrl keyName="space">
+            {t('Activate auto complete')}
+          </Shortcut>
+          <Shortcut ctrl shift={isMac} keyName="m">
+            {t('Toggle Tab action between insert Tab character and move focus out of editor')}
+          </Shortcut>
+          <Shortcut ctrlCmd shift keyName="o">
+            {t('View document outline')}
+          </Shortcut>
+          <Shortcut hover>{t('View property descriptions')}</Shortcut>
+          <Shortcut ctrlCmd keyName="s">
+            {t('Save')}
+          </Shortcut>
+        </ShortcutTable>
+      ),
+      maxWidth: '25rem',
+      distance: 18,
+      ...shortcutsPopoverProps,
+    };
+  }, [t, shortcutsPopoverProps]);
 };
diff --git a/frontend/packages/console-shared/src/components/editor/ToggleSidebarButton.tsx b/frontend/packages/console-shared/src/components/editor/ToggleSidebarButton.tsx
new file mode 100644
index 00000000000..479b89b4996
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/editor/ToggleSidebarButton.tsx
@@ -0,0 +1,48 @@
+import { CodeEditorControl, CodeEditorControlProps } from '@patternfly/react-code-editor';
+import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
+import { useTranslation } from 'react-i18next';
+
+export const SidebarOffIcon = createIcon({
+  name: 'SidebarOffIcon',
+  width: 512,
+  height: 512,
+  svgPath:
+    'M463.98 31.958H48.02C21.5 31.958 0 53.458 0 79.98v352.042c0 26.52 21.5 48.02 48.02 48.02h415.96c26.52 0 48.02-21.5 48.02-48.02V79.979c0-26.52-21.5-48.02-48.02-48.02zm-239.938 384H64V96.042h159.958v320ZM448 315.398v100.56H288.042V96.042H448zm-29.867-78.473h-98.3a8.426 8.426 0 0 0-8.45 8.45v21.25a8.426 8.426 0 0 0 8.45 8.45h98.3a8.426 8.426 0 0 0 8.45-8.45v-21.25a8.426 8.426 0 0 0-8.45-8.45zm0-84.83h-98.3a8.426 8.426 0 0 0-8.45 8.449v21.25a8.426 8.426 0 0 0 8.45 8.45h98.3a8.426 8.426 0 0 0 8.45-8.45v-21.25a8.426 8.426 0 0 0-8.45-8.45zm0 169.662h-98.3a8.426 8.426 0 0 0-8.45 8.45v21.25a8.426 8.426 0 0 0 8.45 8.449h98.3a8.426 8.426 0 0 0 8.45-8.45v-21.25a8.426 8.426 0 0 0-8.45-8.45z',
+});
+
+export const SidebarOnIcon = createIcon({
+  name: 'SidebarOnIcon',
+  width: 512,
+  height: 512,
+  svgPath:
+    'M463.98 31.958H48.02C21.5 31.958 0 53.458 0 79.98v352.042c0 26.52 21.5 48.02 48.02 48.02h415.96c26.52 0 48.02-21.5 48.02-48.02V79.979c0-26.52-21.5-48.02-48.02-48.02zm-239.938 384H64V96.042h159.958v320ZM448 315.398v100.56H288.042V96.042H448zM248.638 66.929v369.443h214.84V66.928Zm177.945 284.528a8.426 8.426 0 0 1-8.45 8.45h-98.3a8.426 8.426 0 0 1-8.45-8.45v-21.25a8.426 8.426 0 0 1 8.45-8.45h98.3a8.426 8.426 0 0 1 8.45 8.45zm0-84.831a8.426 8.426 0 0 1-8.45 8.45h-98.3a8.426 8.426 0 0 1-8.45-8.45v-21.25a8.426 8.426 0 0 1 8.45-8.45h98.3a8.426 8.426 0 0 1 8.45 8.45zm0-84.832a8.426 8.426 0 0 1-8.45 8.45h-98.3a8.426 8.426 0 0 1-8.45-8.45v-21.25a8.426 8.426 0 0 1 8.45-8.449h98.3a8.426 8.426 0 0 1 8.45 8.45z',
+});
+
+interface ToggleSidebarButtonProps extends Partial<CodeEditorControlProps> {
+  isSidebarOpen: boolean;
+  toggleSidebar: () => void;
+  /** Adds a div with `flex-grow: 1` so that the button is aligned to the end of the toolbar */
+  alignToEnd?: boolean;
+}
+
+export const ToggleSidebarButton: React.FCC<ToggleSidebarButtonProps> = ({
+  isSidebarOpen,
+  toggleSidebar,
+  alignToEnd = false,
+  ...props
+}) => {
+  const { t } = useTranslation('console-shared');
+
+  return (
+    <>
+      {alignToEnd && <div style={{ flexGrow: 1 }} />}
+      <CodeEditorControl
+        aria-label={isSidebarOpen ? t('Hide sidebar') : t('Show sidebar')}
+        onClick={toggleSidebar}
+        icon={isSidebarOpen ? <SidebarOnIcon /> : <SidebarOffIcon />}
+        tooltipProps={{ content: isSidebarOpen ? t('Hide sidebar') : t('Show sidebar') }}
+        {...props}
+      />
+    </>
+  );
+};
diff --git a/frontend/packages/console-shared/src/components/editor/__tests__/CodeEditorToolbar.spec.tsx b/frontend/packages/console-shared/src/components/editor/__tests__/CodeEditorToolbar.spec.tsx
index c2ff10bc1bf..5808a58b8a9 100644
--- a/frontend/packages/console-shared/src/components/editor/__tests__/CodeEditorToolbar.spec.tsx
+++ b/frontend/packages/console-shared/src/components/editor/__tests__/CodeEditorToolbar.spec.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@patternfly/react-core';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { ActionType } from '@console/internal/reducers/ols';
 import { useOLSConfig } from '../../../hooks/ols-hook';
 import { AskOpenShiftLightspeedButton, CodeEditorToolbar } from '../CodeEditorToolbar';
+import '@testing-library/jest-dom';
 
 jest.mock('react-i18next', () => ({
   useTranslation: jest.fn(),
@@ -19,7 +19,6 @@ jest.mock('../../../hooks/ols-hook', () => ({
 }));
 
 describe('CodeEditorToolbar', () => {
-  let wrapper: ShallowWrapper;
   const mockDispatch = jest.fn();
 
   beforeEach(() => {
@@ -29,32 +28,32 @@ describe('CodeEditorToolbar', () => {
   });
 
   it('should render null when showShortcuts is false and toolbarLinks is empty', () => {
-    wrapper = shallow(<CodeEditorToolbar />);
-    expect(wrapper.isEmptyRender()).toBe(true);
+    const { container } = render(<CodeEditorToolbar />);
+    expect(container.firstChild).toBeNull();
   });
 
   it('should render toolbar with custom links when toolbarLinks are provided', () => {
-    const toolbarLinks = [<div key="custom">Custom Link</div>];
-    wrapper = shallow(<CodeEditorToolbar toolbarLinks={toolbarLinks} />);
-    expect(wrapper.contains(<div>Custom Link</div>)).toBe(true);
+    render(<CodeEditorToolbar toolbarLinks={[<div key="custom">Custom Link</div>]} />);
+    expect(screen.getByText('Custom Link')).toBeInTheDocument();
   });
 
   it('should render "Ask OpenShift Lightspeed" button when showLightspeedButton is true', () => {
     (useOLSConfig as jest.Mock).mockReturnValue(true);
-    wrapper = shallow(<AskOpenShiftLightspeedButton />);
-    expect(wrapper.find(Button).prop('children')).toBe('console-shared~Ask OpenShift Lightspeed');
+    render(<AskOpenShiftLightspeedButton />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('should not render "Ask OpenShift Lightspeed" button when showLightspeedButton is false', () => {
     (useOLSConfig as jest.Mock).mockReturnValue(false);
-    wrapper = shallow(<AskOpenShiftLightspeedButton />);
-    expect(wrapper.find(Button).exists()).toBe(false);
+    render(<AskOpenShiftLightspeedButton />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   it('should dispatch OpenOLS action when "Ask OpenShift Lightspeed" button is clicked', () => {
     (useOLSConfig as jest.Mock).mockReturnValue(true);
-    wrapper = shallow(<AskOpenShiftLightspeedButton />);
-    wrapper.find(Button).simulate('click');
+    render(<AskOpenShiftLightspeedButton />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
     expect(mockDispatch).toHaveBeenCalledWith({ type: ActionType.OpenOLS });
   });
 });
diff --git a/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx b/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx
index 609784306df..2e8965684d3 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Switch } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import { FormikValues, useField, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
@@ -15,6 +14,7 @@ import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watc
 import { ConsoleYAMLSampleModel } from '@console/internal/models';
 import { getYAMLTemplates } from '@console/internal/models/yaml-templates';
 import { definitionFor, K8sResourceCommon, referenceForModel } from '@console/internal/module/k8s';
+import { ToggleSidebarButton } from '@console/shared/src/components/editor/ToggleSidebarButton';
 import { getResourceSidebarSamples } from '../../utils';
 import { CodeEditorFieldProps } from './field-types';
 
@@ -99,13 +99,13 @@ const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
             language={language}
             toolbarLinks={[
               hasSidebarContent && (
-                <Switch
-                  label={t('public~Sidebar')}
+                <ToggleSidebarButton
+                  key="toggle-sidebar"
                   id="showSidebar"
-                  isChecked={sidebarOpen}
-                  data-checked-state={sidebarOpen}
-                  onChange={() => setSidebarOpen(!sidebarOpen)}
-                  hasCheckIcon
+                  isSidebarOpen={sidebarOpen}
+                  toggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+                  alignToEnd
+                  className="pf-v6-u-mr-xs"
                 />
               ),
             ]}
diff --git a/frontend/packages/console-shared/src/constants/common.ts b/frontend/packages/console-shared/src/constants/common.ts
index 4cf60625252..b5184f0dccb 100644
--- a/frontend/packages/console-shared/src/constants/common.ts
+++ b/frontend/packages/console-shared/src/constants/common.ts
@@ -48,6 +48,8 @@ export const COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/table-colu
 export const LOG_WRAP_LINES_USERSETTINGS_KEY = `${USERSETTINGS_PREFIX}.log.wrapLines`;
 export const SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.showYAMLEditorTooltips`;
 export const SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/showYAMLEditorTooltips`;
+export const SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.showYAMLEditorStickyScroll`;
+export const SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/showYAMLEditorStickyScroll`;
 export const SHOW_FULL_LOG_USERSETTINGS_KEY = `${USERSETTINGS_PREFIX}.show.full.log`;
 // Bootstrap user for OpenShift 4.0 clusters (kube:admin)
 export const KUBE_ADMIN_USERNAMES = ['kube:admin'];
diff --git a/frontend/packages/console-shared/src/hoc/withPostFormSubmissionCallback.tsx b/frontend/packages/console-shared/src/hoc/withPostFormSubmissionCallback.tsx
index 1b94f430307..bf941bff68c 100644
--- a/frontend/packages/console-shared/src/hoc/withPostFormSubmissionCallback.tsx
+++ b/frontend/packages/console-shared/src/hoc/withPostFormSubmissionCallback.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { K8sResourceCommon } from '@console/internal/module/k8s';
 import { usePostFormSubmitAction } from '../hooks/post-form-submit-action';
 
-type WithPostFormSubmissionCallbackProps<R> = {
+export type WithPostFormSubmissionCallbackProps<R> = {
   postFormSubmissionCallback: (arg: R) => Promise<R>;
 };
 
diff --git a/frontend/packages/console-shared/src/hooks/useFullscreen.ts b/frontend/packages/console-shared/src/hooks/useFullscreen.ts
index 9e5a238621a..c9766cb5631 100644
--- a/frontend/packages/console-shared/src/hooks/useFullscreen.ts
+++ b/frontend/packages/console-shared/src/hooks/useFullscreen.ts
@@ -1,5 +1,24 @@
 import { useRef, useState, useEffect, useCallback, RefObject } from 'react';
 
+/**
+ * Hook to determine if the browser is currently in fullscreen mode.
+ */
+export const useIsFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  return isFullscreen;
+};
+
 /**
  * Returns a tuple containing a ref to the element that will be toggled to fullscreen,
  * a function to toggle fullscreen mode, a boolean indicating if the element is currently in fullscreen,
@@ -12,8 +31,8 @@ export const useFullscreen = () => {
   const fullscreenRef = useRef<HTMLDivElement>(null);
   /** Whether the browser supports fullscreen mode */
   const canUseFullScreen = document.fullscreenEnabled;
-
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  /** Whether the currently displayed content is in fullscreen mode */
+  const isFullscreen = useIsFullscreen();
 
   /** Toggle currently displayed content to/from fullscreen */
   const toggleFullscreen = useCallback(() => {
@@ -26,16 +45,6 @@ export const useFullscreen = () => {
     }
   }, []);
 
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(Boolean(document.fullscreenElement));
-    };
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, []);
-
   return [fullscreenRef, toggleFullscreen, isFullscreen, canUseFullScreen] as [
     RefObject<HTMLDivElement>,
     () => void,
diff --git a/frontend/packages/console-shared/src/utils/sample-utils.ts b/frontend/packages/console-shared/src/utils/sample-utils.ts
index 6d0c5656f49..87900f456e9 100644
--- a/frontend/packages/console-shared/src/utils/sample-utils.ts
+++ b/frontend/packages/console-shared/src/utils/sample-utils.ts
@@ -382,7 +382,7 @@ export const getResourceSidebarSamples = (
     ? yamlSamplesData.map((sample: K8sResourceKind) => {
         return {
           id: sample.metadata.uid,
-          ...sample.spec,
+          ...(sample.spec as Exclude<Sample, 'id'>),
         };
       })
     : [];
diff --git a/frontend/public/components/_edit-yaml.scss b/frontend/public/components/_edit-yaml.scss
index 84aeca368a8..4530b105fa1 100644
--- a/frontend/public/components/_edit-yaml.scss
+++ b/frontend/public/components/_edit-yaml.scss
@@ -7,6 +7,10 @@
   position: relative;
 }
 
+.yaml-editor__fullscreen {
+  background-color: var(--pf-t--global--background--color--secondary--default);
+}
+
 .yaml-editor__buttons {
   padding-top: $pf-v6-global-gutter-y;
 }
diff --git a/frontend/public/components/edit-yaml.jsx b/frontend/public/components/edit-yaml.tsx
similarity index 77%
rename from frontend/public/components/edit-yaml.jsx
rename to frontend/public/components/edit-yaml.tsx
index 70d936b6c63..515fc0f0126 100644
--- a/frontend/public/components/edit-yaml.jsx
+++ b/frontend/public/components/edit-yaml.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable tsdoc/syntax */
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
@@ -6,7 +5,7 @@ import { useDispatch, useSelector, connect } from 'react-redux';
 import { action } from 'typesafe-actions';
 import { ActionType, getOLSCodeBlock } from '@console/internal/reducers/ols';
 import { safeLoad, safeLoadAll, safeDump } from 'js-yaml';
-import { ActionGroup, Alert, Button, Switch } from '@patternfly/react-core';
+import { ActionGroup, Alert, Button } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -16,29 +15,40 @@ import {
   getBadgeFromType,
   withPostFormSubmissionCallback,
   getResourceSidebarSamples,
-  SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
-  SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
   useTelemetry,
   useUserSettingsCompatibility,
+  WithPostFormSubmissionCallbackProps,
 } from '@console/shared';
+import {
+  SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
+  SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
+  SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
+  SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
+} from '@console/shared/src/constants/common';
 import PageBody from '@console/shared/src/components/layout/PageBody';
-
+import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import CodeEditor from '@console/shared/src/components/editor/CodeEditor';
 import CodeEditorSidebar from '@console/shared/src/components/editor/CodeEditorSidebar';
 import { fold } from '@console/shared/src/components/editor/yaml-editor-utils';
 import { downloadYaml } from '@console/shared/src/components/editor/yaml-download-utils';
-import { isYAMLTemplate, getImpersonate } from '@console/dynamic-plugin-sdk';
+import { useFullscreen } from '@console/shared/src/hooks/useFullscreen';
+import {
+  isYAMLTemplate,
+  getImpersonate,
+  YAMLTemplate,
+  K8sResourceKind,
+} from '@console/dynamic-plugin-sdk';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
-import { connectToFlags } from '../reducers/connectToFlags';
+import { connectToFlags, WithFlagsProps } from '../reducers/connectToFlags';
 import { errorModal, managedResourceSaveModal } from './modals';
 import ReplaceCodeModal from './modals/replace-code-modal';
 import {
   checkAccess,
   Firehose,
   Loading,
-  LoadingBox,
   resourceObjPath,
   resourceListPathFromModel,
+  FirehoseResult,
 } from './utils';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import {
@@ -48,54 +58,105 @@ import {
   k8sList,
   referenceFor,
   groupVersionFor,
+  AccessReviewResourceAttributes,
+  CodeEditorRef,
+  K8sModel,
 } from '../module/k8s';
 import { ConsoleYAMLSampleModel } from '../models';
 import { getYAMLTemplates } from '../models/yaml-templates';
+import { ConnectDropTarget } from 'react-dnd';
 import { findOwner } from '../module/k8s/managed-by';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src/models';
 import { definitionFor } from '../module/k8s/swagger';
 import { ImportYAMLResults } from './import-yaml-results';
-
-const generateObjToLoad = (templateExtensions, kind, id, yaml, namespace = 'default') => {
-  const sampleObj = safeLoad(yaml ? yaml : getYAMLTemplates(templateExtensions).getIn([kind, id]));
+import { EditYamlSettingsModal } from './modals/edit-yaml-settings-modal';
+import { CodeEditorControl } from '@patternfly/react-code-editor';
+import { CompressIcon } from '@patternfly/react-icons/dist/js/icons/compress-icon';
+import { ExpandIcon } from '@patternfly/react-icons/dist/js/icons/expand-icon';
+import { ToggleSidebarButton } from '@console/shared/src/components/editor/ToggleSidebarButton';
+import { RootState } from '@console/internal/redux';
+import { getActiveNamespace } from '@console/internal/reducers/ui';
+
+const generateObjToLoad = (
+  templateExtensions: Parameters<typeof getYAMLTemplates>[0],
+  kind: string,
+  id: string,
+  yaml: string,
+  namespace = 'default',
+) => {
+  const sampleObj: K8sResourceKind = safeLoad(
+    yaml ? yaml : getYAMLTemplates(templateExtensions).getIn([kind, id]),
+  );
   if (_.has(sampleObj.metadata, 'namespace')) {
     sampleObj.metadata.namespace = namespace;
   }
   return sampleObj;
 };
 
-const stateToProps = (state) => ({
-  activeNamespace: state.UI.get('activeNamespace'),
+const stateToProps = (state: RootState) => ({
+  activeNamespace: getActiveNamespace(state),
   impersonate: getImpersonate(state),
-  models: state.k8s.getIn(['RESOURCES', 'models']),
+  models: state.k8s.getIn(['RESOURCES', 'models']) as Map<string, K8sModel>,
 });
 
-const WithYamlTemplates = (Component) =>
-  function Comp(props) {
-    const kind = props?.obj?.kind;
-    const [templateExtensions, resolvedTemplates] = useResolvedExtensions(
-      React.useCallback((e) => isYAMLTemplate(e) && e.properties.model.kind === kind, [kind]),
-    );
-    const [showTooltips, setShowTooltips] = useUserSettingsCompatibility(
-      SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
-      SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
-      true,
-      true,
-    );
-
-    return !resolvedTemplates ? (
-      <LoadingBox />
-    ) : (
-      <Component
-        templateExtensions={templateExtensions}
-        showTooltips={showTooltips}
-        setShowTooltips={setShowTooltips}
-        {...props}
-      />
-    );
+type EditYAMLInnerProps = WithPostFormSubmissionCallbackProps<any> &
+  ReturnType<typeof stateToProps> & {
+    /** The sample object to load into the editor */
+    sampleObj?: ReturnType<typeof generateObjToLoad>;
+
+    /** Whether to allow multiple YAML documents in the editor */
+    allowMultiple?: boolean;
+    /** Function to connect the drop target for drag-and-drop */
+    connectDropTarget?: ConnectDropTarget;
+    /** Whether the drop target is currently being hovered over */
+    isOver?: boolean;
+    /** Whether the drop target can accept a file */
+    canDrop?: boolean;
+    /** Whether this is a create operation */
+    create: boolean;
+    /** List of YAML samples to display */
+    yamlSamplesList?: FirehoseResult;
+    /** Custom CSS class for the editor */
+    customClass?: string;
+    /** Callback function to handle changes in the YAML content */
+    onChange?: (yaml: string) => void;
+    /** Model to use for the editor */
+    model?: K8sModel;
+    /** Whether to show tooltips in the editor */
+    showTooltips?: boolean;
+    /** Whether to add a button to download the YAML */
+    download?: boolean;
+    /** Header text or component to display above the editor */
+    header: React.ComponentProps<typeof PageHeading>['title'];
+    /** Whether the YAML is generic (not tied to a specific resource) */
+    genericYAML?: boolean;
+    /** Custom alerts to display in the editor */
+    children?: React.ReactNode;
+    /** URL to redirect to after saving */
+    redirectURL?: string;
+    /** Function to clear the file upload state */
+    clearFileUpload: () => void;
+    /** Callback function to save the YAML content */
+    onSave?: (yaml: string) => void;
+    /** Whether this is a redirect from code import */
+    isCodeImportRedirect?: boolean;
+    /** The object being edited */
+    obj?: K8sResourceKind;
+    /** Error message to display */
+    error?: string;
+    /** Whether the editor is in read-only mode */
+    readOnly?: boolean;
+    /** Whether to hide the header */
+    hideHeader?: boolean;
+    /** Function to get the resource object path */
+    resourceObjPath?: (obj: K8sResourceKind, objRef: string) => string;
+    /** Callback function to be called on cancel */
+    onCancel?: () => void;
+    /** The file upload content */
+    fileUpload?: string;
   };
 
-const EditYAMLInner = (props) => {
+const EditYAMLInner: React.FC<EditYAMLInnerProps> = (props) => {
   const {
     allowMultiple,
     connectDropTarget,
@@ -106,7 +167,6 @@ const EditYAMLInner = (props) => {
     customClass,
     onChange = () => null,
     models,
-    showTooltips,
     download: canDownload = true,
     header,
     genericYAML = false,
@@ -121,16 +181,38 @@ const EditYAMLInner = (props) => {
   const navigate = useNavigate();
   const fireTelemetryEvent = useTelemetry();
   const [errors, setErrors] = React.useState(null);
-  const [success, setSuccess] = React.useState(null);
+  const [success, setSuccess] = React.useState<string>(null);
   const [initialized, setInitialized] = React.useState(false);
   const [stale, setStale] = React.useState(false);
   const [sampleObj, setSampleObj] = React.useState(props.sampleObj);
   const [showSidebar, setShowSidebar] = React.useState(!!create);
   const [owner, setOwner] = React.useState(null);
-  const [notAllowed, setNotAllowed] = React.useState();
-  const [displayResults, setDisplayResults] = React.useState();
+  const [notAllowed, setNotAllowed] = React.useState<boolean>();
+  const [displayResults, setDisplayResults] = React.useState<boolean>();
   const [resourceObjects, setResourceObjects] = React.useState();
   const [editorMounted, setEditorMounted] = React.useState(false);
+  const [fullscreenRef, toggleFullscreen, isFullscreen, canUseFullScreen] = useFullscreen();
+
+  const [templateExtensions, resolvedTemplates] = useResolvedExtensions<YAMLTemplate>(
+    React.useCallback(
+      (e): e is YAMLTemplate => isYAMLTemplate(e) && e.properties.model.kind === props?.obj?.kind,
+      [props?.obj?.kind],
+    ),
+  );
+
+  const [showTooltips] = useUserSettingsCompatibility(
+    SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
+    SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
+    true,
+    true,
+  );
+
+  const [stickyScrollEnabled] = useUserSettingsCompatibility(
+    SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
+    SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
+    true,
+    true,
+  );
 
   const [callbackCommand, setCallbackCommand] = React.useState('');
   const [showReplaceCodeModal, setShowReplaceCodeModal] = React.useState(false);
@@ -140,16 +222,14 @@ const EditYAMLInner = (props) => {
   const closeOLS = () => action(ActionType.CloseOLS);
   const dispatch = useDispatch();
 
-  const monacoRef = React.useRef();
+  const monacoRef = React.useRef<CodeEditorRef>();
   const editor = React.useRef();
   const buttons = React.useRef();
 
   const { t } = useTranslation();
 
-  /** @return {import('monaco-editor').editor.IStandaloneCodeEditor | null} */
-  const getEditor = () => {
-    return monacoRef.current?.editor;
-  };
+  const getEditor = (): editor.IStandaloneCodeEditor | undefined =>
+    'editor' in monacoRef?.current ? monacoRef.current.editor : undefined;
 
   const getModel = React.useCallback(
     (obj) => {
@@ -215,7 +295,7 @@ const EditYAMLInner = (props) => {
       }
 
       const { name, namespace } = obj.metadata;
-      const resourceAttributes = {
+      const resourceAttributes: AccessReviewResourceAttributes = {
         group: model.apiGroup,
         resource: model.plural,
         verb: 'update',
@@ -689,13 +769,7 @@ const EditYAMLInner = (props) => {
 
   const getYamlContent_ = (id = 'default', yaml = '', kind = referenceForModel(props.model)) => {
     try {
-      const s = generateObjToLoad(
-        props.templateExtensions,
-        kind,
-        id,
-        yaml,
-        props.obj.metadata.namespace,
-      );
+      const s = generateObjToLoad(templateExtensions, kind, id, yaml, props.obj.metadata.namespace);
       setSampleObj(s);
       return s;
     } catch (error) {
@@ -715,10 +789,6 @@ const EditYAMLInner = (props) => {
     window.dispatchEvent(new Event('sidebar_toggle'));
   };
 
-  const toggleShowTooltips = (event, checked) => {
-    props.setShowTooltips(checked);
-  };
-
   const sanitizeYamlContent = (id, yaml, kind) => {
     const contentObj = getYamlContent_(id, yaml, kind);
     const sanitizedYaml = convertObjToYAMLString(contentObj);
@@ -728,23 +798,19 @@ const EditYAMLInner = (props) => {
 
   React.useEffect(() => {
     editorMounted && getEditor()?.updateOptions({ hover: { enabled: showTooltips } });
-  }, [showTooltips, editorMounted]);
+    editorMounted && getEditor()?.updateOptions({ stickyScroll: { enabled: stickyScrollEnabled } });
+  }, [showTooltips, stickyScrollEnabled, editorMounted]);
 
-  if (!create && !props.obj) {
+  if ((!create && !props.obj) || !resolvedTemplates) {
     return <Loading />;
   }
 
-  const klass = css('co-file-dropzone-container', {
-    'co-file-dropzone--drop-over': isOver,
-  });
-
   if (displayResults) {
     return (
       <ImportYAMLResults
         createResources={createResources}
         displayResults={setDisplayResults}
         importResources={resourceObjects}
-        models={models}
         retryFailed={onRetry}
       />
     );
@@ -760,31 +826,43 @@ const EditYAMLInner = (props) => {
   const showSchema = definition && !_.isEmpty(definition.properties);
   const hasSidebarContent = showSchema || (create && !_.isEmpty(samples)) || !_.isEmpty(snippets);
   const sidebarSwitch = hasSidebarContent && (
-    <Switch
-      label={t('public~Sidebar')}
-      id="showSidebar"
-      isChecked={showSidebar}
-      data-checked-state={showSidebar}
-      onChange={toggleSidebar}
-      hasCheckIcon
+    <ToggleSidebarButton
+      key="edit-yaml-sidebar-toggle"
+      isSidebarOpen={showSidebar}
+      toggleSidebar={toggleSidebar}
+      alignToEnd
+      className="pf-v6-u-mr-xs"
     />
   );
 
-  const tooltipSwitch = (
-    <Switch
-      label={t('public~Tooltips')}
-      id="showTooltips"
-      isChecked={showTooltips}
-      data-checked-state={showTooltips}
-      onChange={toggleShowTooltips}
-      hasCheckIcon
+  const settingsModal = (
+    <EditYamlSettingsModal
+      key="edit-yaml-settings-modal"
+      appendTo={() => {
+        return isFullscreen ? fullscreenRef.current : document.body;
+      }}
+    />
+  );
+
+  const fullscreenButton = (
+    <CodeEditorControl
+      key="edit-yaml-fullscreen-button"
+      onClick={toggleFullscreen}
+      isDisabled={!canUseFullScreen}
+      aria-label={t('public~Toggle fullscreen mode')}
+      tooltipProps={{ content: t('public~Toggle fullscreen mode') }}
+      icon={isFullscreen ? <CompressIcon /> : <ExpandIcon />}
     />
   );
 
   const editYamlComponent = (
     <div className="co-file-dropzone co-file-dropzone__flex">
       {canDrop && (
-        <div className={klass}>
+        <div
+          className={css('co-file-dropzone-container', {
+            'co-file-dropzone--drop-over': isOver,
+          })}
+        >
           <p className="co-file-dropzone__drop-text">{t('public~Drop file here')}</p>
         </div>
       )}
@@ -810,7 +888,10 @@ const EditYAMLInner = (props) => {
       )}
 
       <PageBody className="pf-v6-c-form">
-        <div className="co-p-has-sidebar">
+        <div
+          className={css('co-p-has-sidebar', { 'yaml-editor__fullscreen': isFullscreen })}
+          ref={fullscreenRef}
+        >
           <div
             className={css('co-p-has-sidebar__body', {
               'co-p-has-sidebar__body--sidebar-open': showSidebar && hasSidebarContent,
@@ -819,10 +900,15 @@ const EditYAMLInner = (props) => {
             <div className={css('yaml-editor', customClass)} ref={editor}>
               {showReplaceCodeModal && <ReplaceCodeModal handleCodeReplace={handleCodeReplace} />}
               <CodeEditor
+                isCopyEnabled={canDownload}
                 ref={monacoRef}
                 options={options}
-                showShortcuts={!genericYAML}
-                toolbarLinks={sidebarSwitch ? [tooltipSwitch, sidebarSwitch] : [tooltipSwitch]}
+                showShortcuts={!genericYAML && !isFullscreen}
+                toolbarLinks={
+                  sidebarSwitch
+                    ? [settingsModal, fullscreenButton, sidebarSwitch]
+                    : [settingsModal, fullscreenButton]
+                }
                 onChange={onChange}
                 onSave={() => (allowMultiple ? saveAll() : save())}
                 onEditorDidMount={() => setEditorMounted(true)}
@@ -938,25 +1024,24 @@ const EditYAMLInner = (props) => {
  * This component loads the entire Monaco editor library with it.
  * Consider using `AsyncComponent` to dynamically load this component when needed.
  */
-/** @augments {React.Component<{allowMultiple?: boolean, obj?: any, create: boolean, kind: string, redirectURL?: string, resourceObjPath?: (obj: K8sResourceKind, objRef: string) => string}, onChange?: (yaml: string) => void, clearFileUpload?: () => void>} */
-export const EditYAML_ = connect(stateToProps)(
-  WithYamlTemplates(withPostFormSubmissionCallback(EditYAMLInner)),
-);
+export const EditYAML_ = connect(stateToProps)(withPostFormSubmissionCallback(EditYAMLInner));
+
+export const EditYAML = connectToFlags(FLAGS.CONSOLE_YAML_SAMPLE)(
+  ({ flags, ...props }: WithFlagsProps & EditYAMLInnerProps) => {
+    const resources = flags[FLAGS.CONSOLE_YAML_SAMPLE]
+      ? [
+          {
+            kind: referenceForModel(ConsoleYAMLSampleModel),
+            isList: true,
+            prop: 'yamlSamplesList',
+          },
+        ]
+      : [];
 
-export const EditYAML = connectToFlags(FLAGS.CONSOLE_YAML_SAMPLE)(({ flags, ...props }) => {
-  const resources = flags[FLAGS.CONSOLE_YAML_SAMPLE]
-    ? [
-        {
-          kind: referenceForModel(ConsoleYAMLSampleModel),
-          isList: true,
-          prop: 'yamlSamplesList',
-        },
-      ]
-    : [];
-
-  return (
-    <Firehose resources={resources}>
-      <EditYAML_ {...props} />
-    </Firehose>
-  );
-});
+    return (
+      <Firehose resources={resources}>
+        <EditYAML_ {...props} />
+      </Firehose>
+    );
+  },
+);
diff --git a/frontend/public/components/modals/edit-yaml-settings-modal.tsx b/frontend/public/components/modals/edit-yaml-settings-modal.tsx
new file mode 100644
index 00000000000..7d3c78915e9
--- /dev/null
+++ b/frontend/public/components/modals/edit-yaml-settings-modal.tsx
@@ -0,0 +1,177 @@
+import { CodeEditorControl } from '@patternfly/react-code-editor';
+import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
+import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
+import {
+  Content,
+  Flex,
+  FlexItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Split,
+  SplitItem,
+  Switch,
+} from '@patternfly/react-core';
+import { CogIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
+  SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
+  SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
+  SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
+} from '@console/shared/src/constants/common';
+
+/**!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free
+ * Copyright 2025 Fonticons, Inc.
+ */
+const IBeamCursorIcon = createIcon({
+  name: 'IBeamCursorIcon',
+  width: 256,
+  height: 512,
+  svgPath:
+    'M.1 29.3C-1.4 47 11.7 62.4 29.3 63.9l8 .7C70.5 67.3 96 95 96 128.3L96 224l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0 0 95.7c0 33.3-25.5 61-58.7 63.8l-8 .7C11.7 449.6-1.4 465 .1 482.7s16.9 30.7 34.5 29.2l8-.7c34.1-2.8 64.2-18.9 85.4-42.9c21.2 24 51.2 40 85.4 42.9l8 .7c17.6 1.5 33.1-11.6 34.5-29.2s-11.6-33.1-29.2-34.5l-8-.7C185.5 444.7 160 417 160 383.7l0-95.7 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-95.7c0-33.3 25.5-61 58.7-63.8l8-.7c17.6-1.5 30.7-16.9 29.2-34.5S239-1.4 221.3 .1l-8 .7C179.2 3.6 149.2 19.7 128 43.7c-21.2-24-51.2-40-85.4-42.9l-8-.7C17-1.4 1.6 11.7 .1 29.3z',
+});
+
+/**!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free
+ * Copyright 2025 Fonticons, Inc.
+ */
+const ComputerMouseIcon = createIcon({
+  name: 'ComputerMouseIcon',
+  width: 384,
+  height: 512,
+  svgPath:
+    'M0 192l176 0L176 0 160 0C71.6 0 0 71.6 0 160l0 32zm0 32L0 352c0 88.4 71.6 160 160 160l64 0c88.4 0 160-71.6 160-160l0-128-192 0L0 224zm384-32l0-32C384 71.6 312.4 0 224 0L208 0l0 192 176 0z',
+});
+
+interface ConfigModalItemProps {
+  title: string;
+  description: string;
+  checked?: boolean;
+  setChecked: (checked: boolean) => void;
+  Icon?: React.ComponentType;
+}
+
+const ConfigModalItem: React.FCC<ConfigModalItemProps> = ({
+  title,
+  description,
+  checked,
+  setChecked,
+  Icon = CogIcon,
+}) => {
+  const { t } = useTranslation('public');
+
+  return (
+    <Split hasGutter>
+      <SplitItem isFilled>
+        <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsMd' }}>
+          <FlexItem>
+            <Icon />
+          </FlexItem>
+          <FlexItem>
+            <strong className="pf-v6-u-font-weight-bold">{title}</strong>
+            <Content component="p">{description}</Content>
+          </FlexItem>
+        </Flex>
+      </SplitItem>
+      <SplitItem>
+        <Switch
+          id={title}
+          isReversed
+          label={checked ? t('On') : t('Off')}
+          data-checked-state={checked}
+          onChange={(_, c) => {
+            setChecked(c);
+          }}
+          aria-label={title}
+          className="pf-v6-u-mt-sm"
+          isChecked={checked}
+        />
+      </SplitItem>
+    </Split>
+  );
+};
+
+const TooltipConfigItem = () => {
+  const { t } = useTranslation('public');
+  const [showTooltips, setShowTooltips] = useUserSettingsCompatibility(
+    SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
+    SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
+    true,
+  );
+
+  return (
+    <ConfigModalItem
+      title={t('Tooltips')}
+      description={t('Show tooltips for Resource and Field names and definitions.')}
+      setChecked={setShowTooltips}
+      checked={showTooltips}
+      Icon={IBeamCursorIcon}
+    />
+  );
+};
+
+const StickyScrollConfigItem = () => {
+  const { t } = useTranslation('public');
+  const [showStickyScroll, setShowStickyScroll] = useUserSettingsCompatibility(
+    SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
+    SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
+    true,
+  );
+
+  return (
+    <ConfigModalItem
+      title={t('Sticky scroll')}
+      description={t('Stick scopes to the top of the editor so they are always visible.')}
+      setChecked={setShowStickyScroll}
+      checked={showStickyScroll}
+      Icon={ComputerMouseIcon}
+    />
+  );
+};
+
+const EDIT_YAML_SETTINGS_MODAL_ID = 'edit-yaml-settings-modal';
+
+interface EditYamlSettingsModalProps {
+  appendTo?: React.ComponentProps<typeof Modal>['appendTo'];
+}
+
+export const EditYamlSettingsModal: React.FCC<EditYamlSettingsModalProps> = ({ appendTo }) => {
+  const { t } = useTranslation('public');
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  return (
+    <>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(!isModalOpen)}
+        ouiaId={EDIT_YAML_SETTINGS_MODAL_ID}
+        variant="small"
+        appendTo={appendTo}
+        aria-labelledby={`${EDIT_YAML_SETTINGS_MODAL_ID}-title`}
+        aria-describedby={`${EDIT_YAML_SETTINGS_MODAL_ID}-body`}
+      >
+        <ModalHeader
+          title={t('Editor settings')}
+          labelId={`${EDIT_YAML_SETTINGS_MODAL_ID}-title`}
+        />
+        <ModalBody id={`${EDIT_YAML_SETTINGS_MODAL_ID}-body`}>
+          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+            <TooltipConfigItem />
+            <StickyScrollConfigItem />
+          </Flex>
+        </ModalBody>
+      </Modal>
+      <CodeEditorControl
+        icon={<CogIcon />}
+        aria-label={t('Editor settings')}
+        tooltipProps={{ content: t('Editor settings') }}
+        onClick={() => setIsModalOpen(true)}
+      />
+    </>
+  );
+};
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index 4fcb7aae161..5fb9c3b7c87 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -519,8 +519,7 @@
   "Resources in the same namespace and API group must have unique names": "Resources in the same namespace and API group must have unique names",
   "Failed to parse YAML sample": "Failed to parse YAML sample",
   "An error occurred.": "An error occurred.",
-  "Sidebar": "Sidebar",
-  "Tooltips": "Tooltips",
+  "Toggle fullscreen mode": "Toggle fullscreen mode",
   "Drop file here": "Drop file here",
   "Drag and drop YAML or JSON files into the editor, or manually enter files and use <2>---</2> to separate each definition.": "Drag and drop YAML or JSON files into the editor, or manually enter files and use <2>---</2> to separate each definition.",
   "Create by manually entering YAML or JSON definitions, or by dragging and dropping a file into the editor.": "Create by manually entering YAML or JSON definitions, or by dragging and dropping a file into the editor.",
@@ -927,6 +926,13 @@
   "Enter the name of the {{label}} to delete": "Enter the name of the {{label}} to delete",
   "Delete PersistentVolumeClaim": "Delete PersistentVolumeClaim",
   "Are you sure you want to delete <2>{{pvcName}}</2> PersistentVolumeClaim?": "Are you sure you want to delete <2>{{pvcName}}</2> PersistentVolumeClaim?",
+  "On": "On",
+  "Off": "Off",
+  "Tooltips": "Tooltips",
+  "Show tooltips for Resource and Field names and definitions.": "Show tooltips for Resource and Field names and definitions.",
+  "Sticky scroll": "Sticky scroll",
+  "Stick scopes to the top of the editor so they are always visible.": "Stick scopes to the top of the editor so they are always visible.",
+  "Editor settings": "Editor settings",
   "OK": "OK",
   "Expand {{kind}}": "Expand {{kind}}",
   "Increase the capacity of PVC <2>{{resourceName}}.</2> Note that capacity can't be less than the current PVC size. This can be a time-consuming process.": "Increase the capacity of PVC <2>{{resourceName}}.</2> Note that capacity can't be less than the current PVC size. This can be a time-consuming process.",
diff --git a/frontend/public/reducers/ols.ts b/frontend/public/reducers/ols.ts
index d9d559908fb..f538ff2db68 100644
--- a/frontend/public/reducers/ols.ts
+++ b/frontend/public/reducers/ols.ts
@@ -8,6 +8,7 @@ export enum ActionType {
 type CodeBlock = {
   id: string;
   value: string;
+  triggeredFrom?: any;
 };
 
 /* Note: Using Reducer and Selector from OLS plugin */