Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 10, 2025

Notebook diff editor height calculations did not account for horizontal scrollbars, causing layout shifts when wide cells triggered scrollbar display.

Changes

  • Always reserve horizontal scrollbar height (12px default, respects editor.scrollbar.horizontalScrollbarSize config)
  • Ensures consistent cell heights regardless of scrollbar visibility
  • Extracted DEFAULT_HORIZONTAL_SCROLLBAR_HEIGHT constant to diffCellEditorOptions.ts
  • Updated both diffAndComputeHeight() and computeHeightFromLines() in DiffEditorHeightCalculatorService
  • Added _getHorizontalScrollbarHeight() helper for centralized configuration lookup
  • Updated test expectations to match new behavior

Example

// Before: Height didn't include scrollbar space
const height = visibleLineCount * lineHeight + padding + unchangedRegions;

// After: Reserves space for scrollbar to prevent layout shifts
const height = visibleLineCount * lineHeight + padding + unchangedRegions + scrollbarHeight;
Original prompt

This section details on the original issue you should resolve

<issue_title>Notebook Diff Editor layout issues when cells have a horizontal scrollbar</issue_title>
<issue_description>When viewing diff of a notebook that contains cells with a horizontal scrollbar, the height of the editor calculated is incorrect.
We do not take the height of the scrollbar into account.
As a result the layout shifts causing poor ux

Q. Can we determine whether a scrollbar will be displayed
Q. Can we reserve a height for the editor even if scrollbar isn't displayed (resulting in the same height regardless of whether its displayed or not)</issue_description>

<agent_instructions>There's code used to determine max line length of cell (look for this code) and from this we can determine whether scroll bar will be displayed or not, and if displayed then we can account for this scroll bar when computing the height

Perform a deep analysis of the code and how we compute heights and layout for diff editors in notebook , along with my above comments & comments in issue,

and finally make the changes.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@DonJayamanne > Can we determine whether a scrollbar will be displayed

I think we can do this today, there's some code in regular notebook editor to max line length of a cell. not accurate but close enough for most cases. </comment_new>


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Fix layout issues in notebook diff editor with horizontal scrollbars Fix notebook diff editor layout shifts when horizontal scrollbar appears Dec 10, 2025
Copilot AI requested a review from DonJayamanne December 10, 2025 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Notebook Diff Editor layout issues when cells have a horizontal scrollbar

2 participants