Repository: nextui-org/nextui
File: apps/docs/components/docs/components/codeblock.tsx (TypeScript)

Code before:
  showLines,
  removeIndent,
  hideScrollBar,
  preRef,
  isMultiLine,
  shouldHighlightLine,
  highlightStyle,
  className: classNameProp,
  ...props
}: CodeblockProps & {
  codeLang: Language;
  isMultiLine: boolean;
  shouldHighlightLine: (index: number) => boolean;
  highlightStyle: HighlightStyle[];
  preRef: React.Ref<HTMLElement>;
}) => {
  const height = calculateHeight(codeString);

  const [intersectionRef, isVisible] = useIntersectionObserver({
    threshold: 0,
  });

  return (
    <div
      ref={intersectionRef}
      className="w-full overflow-hidden"
      style={{
        height: isVisible ? "auto" : `${height}px`,
        // due to display: contents on the scrollable child element, this div will also scroll
        // this causes the intersection observer to trigger if scrolled far enough horizontally
        // set the width to fit-content to prevent this div from going off screen
        width: "w-full",
      }}
    >
      {isVisible ? (
        <BaseHighlight
          {...defaultProps}
          code={codeString}
          language={codeLang}
          theme={theme}
          {...props}
        >
          {({className, style, tokens, getLineProps, getTokenProps}) => (
            <pre
              ref={(element) => {
                // Merge the refs
                if (typeof preRef === "function") {
                  preRef(element);
                } else if (preRef) {
                  // @ts-ignore
                  preRef.current = element;

Review comment (bug):
1. `w-full` is already defined in L106.
2. what is the reason of adding `overflow-hidden`?

Code after:
  showLines,
  removeIndent,
  hideScrollBar,
  preRef,
  isMultiLine,
  shouldHighlightLine,
  highlightStyle,
  className: classNameProp,
  ...props
}: CodeblockProps & {
  codeLang: Language;
  isMultiLine: boolean;
  shouldHighlightLine: (index: number) => boolean;
  highlightStyle: HighlightStyle[];
  preRef: React.Ref<HTMLElement>;
}) => {
  const height = calculateHeight(codeString);

  const [intersectionRef, isVisible] = useIntersectionObserver({
    threshold: 0,
  });

  return (
    <div
      ref={intersectionRef}
      style={{
        height: isVisible ? "auto" : `${height}px`,
        // due to display: contents on the scrollable child element, this div will also scroll
        // this causes the intersection observer to trigger if scrolled far enough horizontally
        // set the width to fit-content to prevent this div from going off screen
        width: "w-full",
      }}
    >
      {isVisible ? (
        <BaseHighlight
          {...defaultProps}
          code={codeString}
          language={codeLang}
          theme={theme}
          {...props}
        >
          {({className, style, tokens, getLineProps, getTokenProps}) => (
            <pre
              ref={(element) => {
                // Merge the refs
                if (typeof preRef === "function") {
                  preRef(element);
                } else if (preRef) {
                  // @ts-ignore
                  preRef.current = element;
                }