fix: allow content of highlightedCode(pre tag) to scroll when overscr…

[qqqq5953]

Summary

• Fix code panel scrolling: Refactored the chart-code-viewer.tsx so the highlighted code area remains vertically scrollable even when the rendered <pre> uses overscroll-none.
• Move scroll responsibility to a wrapper: Wrapped chart.highlightedCode in an outer <div> with overflow-y-auto/no-scrollbar, instead of relying on the injected markup to handle scrolling.
• Prevent injected markup from intercepting scroll: Added pointer-events-none and overscroll-contain to the inner div that renders dangerouslySetInnerHTML, so scroll gestures are handled by the wrapper.

Problem

The new overscroll-none css utility causes a scrolling issue in the code preview on https://ui.shadcn.com/charts/bar#charts when clicking the View code button on any chart, and the code preview area(highlighted markup) can no longer be scrolled.

The highlighted markup is generated by highlightCode in apps/v4/lib/highlight-code.ts, which (via a recent change) adds overscroll-none to the rendered <pre>.

Any chart component that uses highlightCode and passes the result into ChartCodeViewer would reproduce the “can’t scroll code” bug.

Changes

apps/v4/components/chart-code-viewer.tsx

-          <div
-            dangerouslySetInnerHTML={{
-              __html: chart.highlightedCode,
-            }}
-            className="no-scrollbar overflow-y-auto"
-          />

+          <div className="no-scrollbar overflow-y-auto">
+            <div
+              dangerouslySetInnerHTML={{
+                __html: chart.highlightedCode,
+              }}
+              className="overflow-y-auto overscroll-contain pointer-events-none"
+            />
+          </div>

Test Plan

[ ] verify the scrolling issue is fixed

[vercel]

@qqqq5953 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.