Draft: Make YAML editor full height and sticky in split view mode

Artur Fedorovrequested to merge
577806-policies-sticky-yaml-editor-fix into master

Summary

  • Makes the YAML editor sidebar sticky in split-view (advanced UI) mode so it stays visible while scrolling through long rule configurations
  • Sets the YAML editor to fill available viewport height using position: sticky with proper CSS Grid alignment
  • Disables the v-dynamic-height directive on the split-view YAML editor so Monaco fills its sticky container instead of calculating its own viewport height

Changes

File Change
yaml_editor.vue Add useDynamicHeight prop passthrough to SourceEditor
security_policies.scss Add .security-policies-sidebar-sticky class with sticky positioning, viewport height, and grid alignment
editor_layout.vue Apply sticky class conditionally in split-view mode; pass use-dynamic-height="false" to split-view YAML editor
editor_layout_spec.js Tests for sticky class application, collapsed state, and standard view
yaml_editor_spec.js Tests for useDynamicHeight prop forwarding

How to validate

  1. Enable feature flags: Feature.enable(:security_policies_split_view) and Feature.enable(:security_policies_kev_filter)
  2. Go to Secure → Policies → Edit an approval policy
  3. Enable "Advanced editor" toggle
  4. Add multiple rules to make the left pane tall
  5. Scroll down — the YAML editor should remain visible and sticky
  6. Collapse/expand the YAML pane — should work correctly
  7. Resize panes via the drag handle — sticky should respect new width

Related

Closes #577806

Merge request reports