Skip to content

Enhancement: Add a Word Wrap Toggle Icon Next to the Copy Icon in Terminal Sections for Improved Readability #39421

Description

@Ashish-Pandey62

I noticed that in the documentation pages, the terminal or code snippet sections often contain long commands and outputs that require horizontal scrolling. This can make it difficult for users to read or copy commands efficiently, especially on smaller screens.

To enhance the overall readability and accessibility, I propose adding a Word Wrap toggle icon next to the existing Copy icon in the terminal/code sections.

Proposed Solution:

  • Introduce a Word Wrap toggle icon (for example, a simple “↩” symbol) adjacent to the Copy button.

  • The icon would allow users to switch between:

    • Wrapped view: using white-space: pre-wrap; to display long lines within the visible container.
    • Default view: preserving the original horizontal scroll layout.

Benefits:

  • Improves readability of long commands.
  • Reduces the need for horizontal scrolling.
  • Enhances the overall user experience when reading or referencing documentation.

Request:

If this proposal aligns with the project’s design and contribution goals, could you assign this issue to me? I would be happy to implement and submit a PR for this enhancement.

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting-detailsFor issues needing detail from the opener.documentationImprovements or additions to documentationexternal-issueCreated outside of Supabase

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions