Skip to content

Prevent long wrapped lines from expanding the snippet editor layout #518

Description

@code-snippets-bot

Report

Forum topic: https://wordpress.org/support/topic/feedback-cap-width-of-textarea/

A long unbroken line can expand the entire snippet editor page horizontally even when Snippets → Settings → Code Editor → Wrap Lines is enabled. The editor becomes tens of thousands of pixels wide and pushes the Save Snippet sidebar outside the visible viewport.

Reproduction

  1. Enable Wrap Lines in the Code Editor settings.
  2. Create or edit a PHP snippet.
  3. Add a string or other token containing several thousand characters without spaces.
  4. Open the snippet editor at a normal desktop viewport width.

Confirmed in Code Snippets 3.10.2. The CodeMirror instance reports lineWrapping: true and has the CodeMirror-wrap class, but the page still expands to the line's intrinsic width.

Expected behaviour

  • Long lines wrap or remain contained within the code editor.
  • The editor stays within its available layout column.
  • The Save Snippet sidebar remains visible at desktop widths.
  • The editor does not create document-level horizontal overflow.

Actual behaviour

The first editor column grows to the long line's minimum-content width. The Save Snippet sidebar is moved far outside the viewport and can be reached only by scrolling the entire page horizontally.

Likely layout cause

The editor form currently uses:

grid-template-columns: 1fr $sidebar-width;

The first grid track therefore retains its automatic minimum size and can be expanded by CodeMirror's intrinsic content width. During reproduction, constraining that track with minmax(0, 1fr) kept the editor and sidebar within the viewport. The final implementation should also verify any remaining internal overflow and responsive behaviour.

Acceptance criteria

  • With Wrap Lines enabled, a long unbroken line does not expand the page.
  • The Save Snippet sidebar remains fully reachable without document-level horizontal scrolling at desktop widths.
  • The single-column layout remains usable at and below the existing responsive breakpoint.
  • Add an end-to-end regression test using a long unbroken line at representative desktop and narrow viewport widths.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions