### Summary On the security policy editor pages (New policy and Edit policy), when the browser viewport is narrow enough that the two-column layout stacks (rule/settings section on top, YAML section below), the YAML editor renders badly. Instead of spanning the full available width, it stays at a fixed narrow pixel width left over from the two-column layout, leaving a large empty gutter next to it. This was reported in Slack by a user who uses Chrome's vertical tabs feature. Vertical tabs take horizontal space away from the page content, which pushes the layout into the stacked breakpoint even on a normal laptop screen. Chrome vertical tabs is just one way to trigger this; any narrow viewport, or a wide GitLab left sidebar combined with a narrow browser window, reproduces the same issue. ### Steps to reproduce 1. Open a project on GitLab.com with an Ultimate plan, go to Secure \> Policies \> New policy, and choose any policy type (for example, Scan execution policy) so the editor with the split rule/YAML view loads. 2. Make the content area narrow. You can do this in any of these ways: - Enable Chrome vertical tabs (Chrome menu \> "Show tab sidebar", or right click the tab strip and choose "Show tabs in side panel"). - Shrink the browser window width below the layout's `lg` container breakpoint. - Use responsive mode in browser devtools at around 1000px wide. 3. Scroll down to the YAML section. ### Example Project This reproduces on any GitLab.com project with an Ultimate plan, for example: https://gitlab.com/gl-demo-ultimate-cliban/skills-repository/-/security/policies/new?type=scan_execution_policy | Description | UI | |-------------|----| | Stacked UI | {width=900 height=585} | ### What is the current _bug_ behavior? When the layout stacks (rule/settings section on top, YAML section below), the YAML editor still renders at the narrow pixel width it would use in the two-column layout, instead of expanding to fill the available width. On screen this looks like: an "Additional configuration" heading, then the Save/Cancel buttons, then a "Yaml" collapse header, then the YAML editor in a narrow column (roughly 460px wide in the reported screenshot) with a large area of empty space to its right. This happens because in `ee/app/assets/javascripts/security_orchestration/components/policy_editor/editor_layout.vue`, the root section uses `gl-flex gl-flex-col @lg/panel:gl-grid` with the `security-policies-split-view` class. Below the `lg` container breakpoint (defined in `ee/app/assets/stylesheets/components/security_policies.scss`), the layout is a vertical flex column, so the rule and YAML sections stack vertically. However, the `computedYamlWidth` computed property always sets an inline `width: ${SPLIT_VIEW_MAX_WIDTH - ruleWidth}px` on the `<aside class="security-policies-sidebar ...">` (`data-testid="yaml-section"`) that wraps the YAML editor, and `computedRuleWidth` does the same for the rule section. These inline pixel widths are applied whenever the new split view (`policyEditorEnabled`) is on, with no check for whether the container is actually wide enough for the two-column grid. As a result, the stacked layout still gets the narrow two-column pixel widths instead of full width. ### What is the expected _correct_ behavior? When the layout stacks, both the rule section and the YAML section should take the full width of the content area. The inline pixel width from `computedRuleWidth` and `computedYamlWidth` should only apply when the two-column grid is active (at or above the `lg` container breakpoint). Below that breakpoint, the YAML editor should render at full width below the rule section and actions, readable, without a large empty gutter. ### Relevant logs and/or screenshots Screenshot from the Slack report (Chrome with vertical tabs, GitLab.com). The screenshot from the Slack thread should be attached to this issue. ### Possible fixes Make `computedYamlWidth` and `computedRuleWidth` in `ee/app/assets/javascripts/security_orchestration/components/policy_editor/editor_layout.vue` only apply their pixel width at the `lg` container breakpoint, instead of unconditionally. For example, drive the width through a CSS custom property that is only consumed inside a `@include gl-container-width-up(lg, panel)` block in `ee/app/assets/stylesheets/components/security_policies.scss`, or use a container-query-aware class instead of an inline `style` attribute. Below the breakpoint, both sections would then fall back to `width: 100%` from the normal flex column layout. Relevant files: - https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_orchestration/components/policy_editor/editor_layout.vue - https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/stylesheets/components/security_policies.scss