Apply policy editor split widths only at lg container width

What does this MR do and why?

Closes #629603 (closed)

Summary

Instead of setting width directly on the rule and YAML editor panels when resizing, the code now sets CSS custom properties (variables) on those elements instead. The actual width styling is then handled in the stylesheet, which only applies the widths when the screen is wide enough to show both panels side by side — on smaller screens, the panels simply stack and take up full width. This approach is cleaner because it keeps layout logic in CSS where it belongs, and prevents the inline styles from accidentally overriding the responsive stacking behaviour on narrow screens. Tests were updated to reflect the new variable names.

References

• Issue: #629603 (closed)
• Approved plan: #629603 (comment 3875154527)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Make sure the policy editor split view is enabled (policy_editor_enabled? in ee/app/helpers/ee/security_orchestration_helper.rb; it's on for GitLab.com).
2. Use a project with Ultimate. Go to Secure > Policies > New policy, and pick Scan execution policy.
3. Open browser devtools responsive mode and set the width to about 1000px, or enable Chrome vertical tabs to narrow the content area below 992px.
4. Expected: the YAML section stacks under the rules and fills the full width, with no empty gutter.
5. Widen the viewport to 1300px or more. Expected: the two columns return, dragging the resizer between them still changes both widths, and the reset button restores the default widths.
6. Repeat in a project or group where the split view is disabled. Expected: the old two-mode layout is unchanged.

Verification

• yarn jest ee/spec/frontend/security_orchestration/components/policy_editor/editor_layout_spec.js → 50 passed, 50 total. Two existing width tests were reshaped to assert the custom properties, and two tests were added: no width variables when split view is off, and the class the stylesheet hooks into is present.
• stylelint, eslint, and prettier are clean on the changed files.
• Compiled CSS checked manually: the width rules are emitted only inside @container panel (width >= 992px).
• Independent review verdict, quoted verbatim: "pass with findings". Findings applied: pinned the class hooks in the spec, and added a 100% fallback to var().
• Findings recorded but not acted on: no automated test loads the stylesheet, so the visual outcome is verified manually only. The SCSS nesting is deliberate because .security-policies-sidebar is shared with the legacy layout, and the nesting also lifts specificity above the gl-w-full utility.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.