)]}'
{
  "commit": "e2954ce9c186576151b5e0da05de1b37bb99afea",
  "tree": "ef54edfec55171ff3faf8428e0f0e274b49e1ea5",
  "parents": [
    "dbca8975c4616c02f284359fed07d4a2c1477301"
  ],
  "author": {
    "name": "David Crawshaw",
    "email": "david@zentus.com",
    "time": "Sun Jun 15 00:06:34 2025 +0000"
  },
  "committer": {
    "name": "David Crawshaw",
    "email": "david@zentus.com",
    "time": "Sat Jun 14 17:12:58 2025 -0700"
  },
  "message": "webui: fix diff view scrollbar visibility and resize handling\n\nFix Monaco editor scrollbar display issues and improve browser window resize\nresponsiveness in the diff view, providing a cleaner interface and better\nuser experience across different screen sizes.\n\nProblem Analysis:\nThe diff view had two significant issues affecting usability:\n\n1. Monaco Scrollbar Visibility: Despite setting scrollbar configuration to\n   \u0027hidden\u0027, a large gray scrollbar remained visible on the right side of\n   the Monaco diff editor. This was caused by insufficient CSS targeting\n   of Monaco\u0027s complex DOM structure and scrollbar element hierarchy.\n\n2. Resize Handling: The diff view did not properly adapt when users resized\n   their browser window. While the editor had automaticLayout: false and\n   manual sizing, there was no window resize listener to trigger layout\n   recalculation, causing the editor to maintain its original dimensions.\n\n3. Refresh Button Layout: At certain screen widths, the refresh button would\n   wrap to its own line prematurely due to inflexible sizing constraints.\n\nImplementation Changes:\n\n1. Monaco Scrollbar Removal (sketch-diff2-view.ts):\n   - Added comprehensive global CSS rules targeting all Monaco scrollbar elements\n   - Targeted .monaco-editor, .monaco-diff-editor, and .monaco-scrollable-element\n   - Applied multiple hiding techniques: display: none, visibility: hidden,\n     width/height: 0, opacity: 0 for maximum coverage\n   - Added padding/margin removal to prevent scrollbar space reservation\n   - Ensured diff content takes full width without scrollbar spacing\n\n2. Window Resize Handler (sketch-monaco-view.ts):\n   - Added setupWindowResizeHandler() method with debounced resize logic\n   - Implemented 100ms debounce to prevent excessive layout calls\n   - Added window \u0027resize\u0027 event listener that triggers fitEditorToContent()\n   - Fallback layout call with current container dimensions if fit function unavailable\n   - Proper cleanup in disconnectedCallback() to prevent memory leaks\n\n3. Layout Improvements (sketch-diff2-view.ts):\n   - Set minimum width (400px) for sketch-diff-range-picker component\n   - Added minimum width (120px) for file-count display\n   - Ensured flex layout provides adequate space for all controls\n   - Improved responsive behavior at various screen widths\n\n4. Enhanced Scrollbar Configuration (sketch-monaco-view.ts):\n   - Extended scrollbar options with additional Monaco-specific settings:\n     - useShadows: false to disable scrollbar shadows\n     - verticalHasArrows: false / horizontalHasArrows: false to remove arrows\n     - verticalScrollbarSize: 0 / horizontalScrollbarSize: 0 for zero track size\n   - Combined configuration-based and CSS-based hiding for complete coverage\n\nTechnical Details:\n- Global CSS injection occurs once per diff view instance in constructor\n- Window resize handler uses setTimeout debouncing to avoid performance issues\n- Monaco editor layout() called with explicit dimensions during resize\n- CSS targeting covers all known Monaco scrollbar element patterns\n- Minimum width constraints prevent layout collapse at small screen sizes\n- Cleanup handlers prevent memory leaks when components are destroyed\n\nBenefits:\n- Clean, professional diff view appearance without distracting scrollbars\n- Smooth responsive behavior when browser window is resized\n- Improved layout stability for controls at various screen widths\n- Better user experience across desktop and mobile viewport sizes\n- Maintained full Monaco editor functionality (editing, syntax highlighting, etc.)\n\nTesting:\n- Verified scrollbar completely hidden at all screen sizes\n- Tested resize responsiveness from 600px to 1400px+ widths\n- Confirmed smooth transitions during window resize operations\n- Validated refresh button layout behavior at different breakpoints\n- Ensured Monaco editor features remain fully functional\n- Tested both horizontal and vertical window resize scenarios\n\nThis implementation provides a polished, responsive diff view experience\nthat properly adapts to user browser configurations while maintaining\nall advanced Monaco editor capabilities.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: sf19d359b4fcbcbdek\n",
  "tree_diff": [
    {
      "type": "modify",
      "old_id": "185db7b554e52cffce7fbb1bd068992114e3a264",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-diff2-view.ts",
      "new_id": "722be567f67e0160f5827dfdd57de0038fce3502",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-diff2-view.ts"
    },
    {
      "type": "modify",
      "old_id": "915da5772d5829428eab00f0c3399e6d5c8a98b8",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-monaco-view.ts",
      "new_id": "5fe57b1700fd37529070140fc2fa9890de72433b",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-monaco-view.ts"
    }
  ]
}