react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

Overflow lines get cut off

Open Beebeeoii opened this issue 5 months ago • 0 comments

I am having the issue where the last few lines of the CodeMirror editor gets cut off. Seems like there is potentially a miscalculation on the scroll height?

Appreciate any help thanks!

<Collapsible className="flex flex-col w-full h-full outline outline-gray-300">
  <div className="flex h-8 items-center justify-between px-4 bg-gray-100">
    ...
  </div>

  <CollapsibleContent className="flex flex-col h-full overflow-hidden">
    <CodeMirror
      key={editorKey}
      ref={editorRef}
      className={className}
      value={value}
      style={{ overflow: 'auto' }}
      readOnly={readOnly}
      extensions={extensions}
      onCreateEditor={handleCreateEditor}
    />
  </CollapsibleContent>
</Collapsible>

Demo: Notice that line 541 is cut off, and also there should be 543 lines in total (2 lines are missing). Code content is blurred for privacy reasons.

https://github.com/user-attachments/assets/4b63e8fd-abfb-4653-9c14-304dd1259ff7

Beebeeoii avatar Jul 18 '25 15:07 Beebeeoii