tree ef54edfec55171ff3faf8428e0f0e274b49e1ea5
parent dbca8975c4616c02f284359fed07d4a2c1477301
author David Crawshaw <david@zentus.com> 1749945994 +0000
committer David Crawshaw <david@zentus.com> 1749946378 -0700

webui: fix diff view scrollbar visibility and resize handling

Fix Monaco editor scrollbar display issues and improve browser window resize
responsiveness in the diff view, providing a cleaner interface and better
user experience across different screen sizes.

Problem Analysis:
The diff view had two significant issues affecting usability:

1. Monaco Scrollbar Visibility: Despite setting scrollbar configuration to
   'hidden', a large gray scrollbar remained visible on the right side of
   the Monaco diff editor. This was caused by insufficient CSS targeting
   of Monaco's complex DOM structure and scrollbar element hierarchy.

2. Resize Handling: The diff view did not properly adapt when users resized
   their browser window. While the editor had automaticLayout: false and
   manual sizing, there was no window resize listener to trigger layout
   recalculation, causing the editor to maintain its original dimensions.

3. Refresh Button Layout: At certain screen widths, the refresh button would
   wrap to its own line prematurely due to inflexible sizing constraints.

Implementation Changes:

1. Monaco Scrollbar Removal (sketch-diff2-view.ts):
   - Added comprehensive global CSS rules targeting all Monaco scrollbar elements
   - Targeted .monaco-editor, .monaco-diff-editor, and .monaco-scrollable-element
   - Applied multiple hiding techniques: display: none, visibility: hidden,
     width/height: 0, opacity: 0 for maximum coverage
   - Added padding/margin removal to prevent scrollbar space reservation
   - Ensured diff content takes full width without scrollbar spacing

2. Window Resize Handler (sketch-monaco-view.ts):
   - Added setupWindowResizeHandler() method with debounced resize logic
   - Implemented 100ms debounce to prevent excessive layout calls
   - Added window 'resize' event listener that triggers fitEditorToContent()
   - Fallback layout call with current container dimensions if fit function unavailable
   - Proper cleanup in disconnectedCallback() to prevent memory leaks

3. Layout Improvements (sketch-diff2-view.ts):
   - Set minimum width (400px) for sketch-diff-range-picker component
   - Added minimum width (120px) for file-count display
   - Ensured flex layout provides adequate space for all controls
   - Improved responsive behavior at various screen widths

4. Enhanced Scrollbar Configuration (sketch-monaco-view.ts):
   - Extended scrollbar options with additional Monaco-specific settings:
     - useShadows: false to disable scrollbar shadows
     - verticalHasArrows: false / horizontalHasArrows: false to remove arrows
     - verticalScrollbarSize: 0 / horizontalScrollbarSize: 0 for zero track size
   - Combined configuration-based and CSS-based hiding for complete coverage

Technical Details:
- Global CSS injection occurs once per diff view instance in constructor
- Window resize handler uses setTimeout debouncing to avoid performance issues
- Monaco editor layout() called with explicit dimensions during resize
- CSS targeting covers all known Monaco scrollbar element patterns
- Minimum width constraints prevent layout collapse at small screen sizes
- Cleanup handlers prevent memory leaks when components are destroyed

Benefits:
- Clean, professional diff view appearance without distracting scrollbars
- Smooth responsive behavior when browser window is resized
- Improved layout stability for controls at various screen widths
- Better user experience across desktop and mobile viewport sizes
- Maintained full Monaco editor functionality (editing, syntax highlighting, etc.)

Testing:
- Verified scrollbar completely hidden at all screen sizes
- Tested resize responsiveness from 600px to 1400px+ widths
- Confirmed smooth transitions during window resize operations
- Validated refresh button layout behavior at different breakpoints
- Ensured Monaco editor features remain fully functional
- Tested both horizontal and vertical window resize scenarios

This implementation provides a polished, responsive diff view experience
that properly adapts to user browser configurations while maintaining
all advanced Monaco editor capabilities.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sf19d359b4fcbcbdek