[00548] DiffViewerMobileInlineMode#4621
Merged
Merged
Conversation
Implement automatic viewport detection that forces unified (inline) view mode on mobile devices (< 768px) to prevent compressed split-view on narrow screens. Also enable word wrap automatically on mobile. Changes: - Add useIsMobile hook using window.matchMedia for efficient breakpoint detection - Override viewType to "unified" on mobile regardless of prop value - Auto-enable word wrap on mobile viewports - Add unit tests for hook logic and component behavior - Update package.json with vitest dependency for testing Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Remove unused imports and add missing afterEach import to make tests compile cleanly with tsc strict mode. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add happy-dom test environment and vitest config to enable tests to run with DOM APIs (window.matchMedia) available. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…pdown The previous mobile detection used a window-level media query, so a DiffView embedded in a panel narrower than the viewport never switched to inline mode (it saw a "wide" window and tried to render a split that had no room). Replace useIsMobile with useIsNarrow, which measures the widget's own container via a ResizeObserver and falls back to unified (inline) view + word wrap only when the container itself is below 768px. On a narrow container with multiple files, collapse the stacked file headers into a sticky "Jump to file" dropdown that scrolls to the chosen file (all diffs still render — navigation only). Per-file metadata is derived once and shared by the dropdown and the file list. Tests now render the real component/hook (via react-dom createRoot, mocked ResizeObserver) instead of asserting on mock shadows, covering container-width detection, split/unified switching, and dropdown visibility. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Collaborator
Staging removedStaging environment has been deleted for this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #4583
Summary
Changes
Implemented mobile-responsive behavior for the DiffView widget that automatically switches to unified (inline) mode on narrow viewports (< 768px) to improve code readability on mobile devices. Added comprehensive test coverage for the new mobile detection logic.
API Changes
useIsMobilehook (exported) — New React hook that detects mobile viewports usingwindow.matchMedia("(max-width: 767px)")with SSR-safe initialization and efficient event-based updatesFiles Modified
Implementation:
src/widgets/Ivy.Widgets.DiffView/frontend/src/DiffView.tsx— AddeduseIsMobilehook, overridesviewTypeto "unified" on mobile, auto-enables word wrap on mobileTests:
src/widgets/Ivy.Widgets.DiffView/frontend/src/useIsMobile.test.ts— Unit tests for mobile detection logic and media query behaviorsrc/widgets/Ivy.Widgets.DiffView/frontend/src/DiffView.test.tsx— Component-level tests for mobile viewport overridesConfiguration:
src/widgets/Ivy.Widgets.DiffView/frontend/package.json— Added vitest dependency and test scriptCommits