feat(code-block): add word wrap functionality and controls to code bl… by Priyanshuthapliyal2005 · Pull Request #39689 · supabase/supabase

Priyanshuthapliyal2005 · 2025-10-20T18:38:36Z

I have read the CONTRIBUTING.md file.

YES

What kind of change does this PR introduce?

feature added

What is the current behavior?

#39421
the terminal or code snippet sections often contain long commands and outputs that require horizontal scrolling

What is the new behavior?

Adds a word wrap button to code blocks. Users can toggle line wrapping for easier reading of long commands; both wrap and copy buttons show on hover.

Additional context

BEFORE

AFTER

Summary by CodeRabbit

Release Notes

New Features
- Added a wrap/unwrap toggle control to code blocks for flexible viewing options
- Code blocks now support text wrapping for better readability without horizontal scrolling
- Improved code block layout and presentation

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…ocks

vercel · 2025-10-20T18:38:45Z

@Priyanshuthapliyal2005 is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-10-20T18:38:48Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
cms	Ready	Preview	Comment	Dec 11, 2025 0:43am
docs	Ready	Preview	Comment	Dec 11, 2025 0:43am
studio-self-hosted	Ready	Preview	Comment	Dec 11, 2025 0:43am
studio-staging	Ready	Preview	Comment	Dec 11, 2025 0:43am
ui-library	Ready	Preview	Comment	Dec 11, 2025 0:43am
zone-www-dot-com	Ready	Preview	Comment	Dec 11, 2025 0:43am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
studio	Ignored			Dec 11, 2025 0:43am
design-system	Skipped			Dec 11, 2025 0:43am

github-actions · 2025-10-20T18:38:52Z

Thanks for contributing to Supabase! ❤️ Our team will review your PR.

A few tips for a smoother review process:

If you have a local version of the repo, run pnpm run format to make sure formatting checks pass.
Once we've reviewed your PR, please don't trivially merge master (don't click Update branch if there are no merge conflicts to be fixed). This invalidates any pre-merge checks we've run.

Priyanshuthapliyal2005 · 2025-10-20T18:42:52Z

@charislam @saltcod would love your review.

ChrisChinchilla · 2025-10-23T13:53:14Z

@Priyanshuthapliyal2005 Thanks! We are looking… Nice PR!

stylessh · 2025-10-23T14:22:04Z

Thanks for you contribution @Priyanshuthapliyal2005 ! This looks nice.

I just see one issue:

The line count gets messed up when word wrapping
There should be space between lines numbers according on the lines wrapped.

no wrap

wrap

Se how the line 15 takes line 16 as well.

Ideally, it should look like this (made randomly with devtools):

…ber display and structure

Priyanshuthapliyal2005 · 2025-10-23T18:04:36Z

@stylessh I’ve fixed it. earlier line numbers and code were in separate columns, now each pair is wrapped in a single grid row for proper alignment.

stylessh · 2025-10-30T17:45:32Z

Thanks @Priyanshuthapliyal2005!
This is nice

Just a final nit: Make sure the red box is filled with the gray bg, the line count should have h-full, same at the bottom.

Priyanshuthapliyal2005 · 2025-10-31T04:01:31Z

hi @stylessh , i have fixed the issue. Please re-review when you get a chance.

ChrisChinchilla · 2025-12-11T11:18:38Z

@Priyanshuthapliyal2005 Could you fix the prettier errors or give me write access to your fork / PR to do it myself and we can get this merged.

coderabbitai · 2025-12-11T11:47:30Z

Walkthrough

Introduces a new CodeBlockControls component for managing code block wrapping behavior with toggle state and DOM integration. Restructures the code block layout to a responsive grid when line numbers are enabled and adds CSS styling to handle wrapped content rendering.

Changes

Cohort / File(s)	Change Summary
Code Block Components `apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx`, `apps/docs/features/ui/CodeBlock/CodeBlock.tsx`	New `CodeBlockControls` component exported with state-managed wrap toggling, ref-based `.shiki` attribute targeting, and integrated copy functionality. Restructured existing `CodeBlock.tsx` from single-column to responsive two-column grid layout when line numbers enabled. Replaced `CodeCopyButton` with new `CodeBlockControls`. Changed `CodeLine` container from fixed height to min-height with adjusted leading.
Styling `apps/docs/styles/main.scss`	Added CSS rule for `.shiki[data-wrapped='true'] .code-content` to enable word-wrapping, hidden overflow, and break-word handling for wrapped code content.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

New component logic: Verify toggleWrap function correctly targets nearest .shiki ancestor and properly toggles data-wrapped attribute
Grid layout restructuring: Confirm responsive grid layout correctly aligns line numbers with code content and handles first/last line padding
CSS wrapping styles: Ensure .shiki[data-wrapped='true'] selector properly applies to correct elements and whitespace/overflow handling is correct
Component integration: Review CodeBlockControls integration in CodeBlock.tsx and import/dependency consistency

Poem

🐰 A wrapping adventure, bold and true,
Grid layouts dance in columns two,
Toggle the state with a whisker's care,
Code blocks wrap without a scroll despair!
click → wrapped → CSS cascades,
CodeRabbit celebrates these layout upgrades! 🎀

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main feature: adding word wrap functionality and controls to code blocks, directly matching the primary changes in the changeset.
Description check	✅ Passed	The description follows the template with all required sections completed: CONTRIBUTING.md confirmation, change type, current behavior with issue reference, new behavior with visual context, and before/after screenshots demonstrating the feature.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Priyanshuthapliyal2005 · 2025-12-11T11:51:33Z

Hi @ChrisChinchilla , I’ve fixed the Prettier error. Could you please review it?

Copilot

Pull request overview

This PR adds a word wrap toggle button to code blocks in the documentation site, addressing issue #39421 where long commands and outputs require horizontal scrolling. The implementation uses a grid layout for line numbers, a new control component with wrap/unwrap buttons, and CSS to handle the wrapping behavior.

Key Changes:

Restructured code block layout from flexbox to CSS grid to better support word wrapping with line numbers
Added a new CodeBlockControls component that provides both word wrap toggle and copy functionality
Applied CSS rules to hide horizontal overflow and enable word wrapping when the wrap state is active

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
apps/docs/features/ui/CodeBlock/CodeBlock.tsx	Refactored layout from flexbox to CSS grid for line numbers; replaced individual CodeCopyButton with CodeBlockControls component
apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx	Added CodeBlockControls component with word wrap toggle functionality and state management; added WrapText and ArrowRightFromLine icon imports
apps/docs/styles/main.scss	Added CSS rules to handle word wrapping behavior when data-wrapped attribute is set

Comments suppressed due to low confidence (1)

apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx:8

Unused import getFontStyle.

import { getFontStyle } from './CodeBlock.utils'

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-11T11:52:19Z

+.shiki[data-wrapped='true'] .code-content {
+  overflow-x: hidden !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;


The word-break property is set to 'break-word', which is a legacy value. Consider using the more modern and correct 'overflow-wrap: break-word' instead, or 'word-break: break-all' if you want to break within words at any character.

Suggested change

word-break: break-word !important;

overflow-wrap: break-word !important;

Copilot · 2025-12-11T11:52:19Z

+  overflow-x: hidden !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;


The CSS selector targets '.code-content' class but uses '!important' rules which can make future styling overrides difficult. Since this is a new feature, consider whether '!important' is necessary or if the selectors can be made more specific instead.

Suggested change

overflow-x: hidden !important;

white-space: pre-wrap !important;

word-break: break-word !important;

overflow-x: hidden;

white-space: pre-wrap;

word-break: break-word;

Copilot · 2025-12-11T11:52:20Z

+        <code className={lineNumbers ? 'grid grid-cols-[auto_1fr]' : ''}>
+          {lineNumbers ? (
+            <>
+              {tokens.map((line, idx) => (
+                <Fragment key={idx}>
+                  <div
+                    className={cn(
+                      'select-none text-right text-muted bg-control px-2 min-h-5 leading-5',
+                      idx === 0 && 'pt-6',
+                      idx === tokens.length - 1 && 'pb-6'
+                    )}
+                  >
+                    {idx + 1}
+                  </div>
+                  <div
+                    className={cn(
+                      'code-content min-h-5 leading-5 pl-6 pr-6',
+                      idx === 0 && 'pt-6',
+                      idx === tokens.length - 1 && 'pb-6'
+                    )}
+                  >
+                    <CodeLine tokens={line} twoslash={twoslashed?.get(idx)} />
+                  </div>
+                </Fragment>
+              ))}
+            </>
+          ) : (
+            <div className="code-content p-6">
+              {tokens.map((line, idx) => (
+                <CodeLine key={idx} tokens={line} twoslash={twoslashed?.get(idx)} />
              ))}
            </div>
          )}


The removal of the 'overflow-x-auto' class from the code content wrapper means long code lines won't have horizontal scrolling in the default (non-wrapped) state. The grid layout for line numbers combined with no overflow handling could cause long lines to be cut off or overflow incorrectly. Add 'overflow-x-auto' to the pre element or code-content divs to ensure horizontal scrolling works when word wrap is disabled.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx (1)
118-157: Wrap toggle behavior is solid; consider a couple of small accessibility tweaks

The imperative toggle via closest('.shiki') and data-wrapped is a reasonable approach here and matches the new CSS hook, so the core behavior looks good.

Two small improvements to consider:
Expose toggle state to assistive tech
Since this button behaves as an on/off toggle, you could add an explicit pressed state:
<button
  onClick={toggleWrap}
  aria-pressed={isWrapped}
  type="button"
  className={cn('border rounded-md p-1', 'hover:bg-selection transition')}
  aria-label={isWrapped ? 'Disable word wrap' : 'Enable word wrap'}
>
type="button" also future-proofs against accidental form submission if this control ever ends up inside a <form>.
Keyboard accessibility for hidden controls
With className="hidden group-hover:flex ...", keyboard users can’t tab to the controls unless the container is physically hovered with a pointer. Consider additionally showing them when the code block (or controls) are focused, e.g. via Tailwind’s focus-within variant:
<div
  ref={wrapperRef}
  className="hidden group-hover:flex group-focus-within:flex absolute top-2 right-2 gap-1"
>
This keeps the hover affordance while making the controls discoverable via keyboard focus as well.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cfa59da and 6e6a5ac.

📒 Files selected for processing (3)

apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx (2 hunks)
apps/docs/features/ui/CodeBlock/CodeBlock.tsx (3 hunks)
apps/docs/styles/main.scss (1 hunks)

🧰 Additional context used

🧠 Learnings (5)