Merged
Conversation
✅ Deploy Preview for lynx-go-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Adds a fullscreen toggle button that expands the component preview to fill the viewport while keeping all chrome (tabs, footer). Pressing Escape or clicking the button again exits fullscreen. Includes iOS Safari safe area support and smooth enter animation.
Add two fullscreen modes sharing one container: - 'all': editor + preview (existing behavior) - 'preview': hides editor, expands preview to full width Both entry buttons visible in footer; clicking switches modes in fullscreen, Escape exits. Adds IconFullscreenPreview icon.
- Place the fullscreen toggle inside the preview header next to the RadioGroup instead of in the footer - Reuse IconFullscreen/IconExitFullscreen for both modes - Remove unused IconFullscreenPreview - Fix max-width override so preview expands fully in fullscreen
- Override height: 370px constraint on resizable in preview-fullscreen so preview fills the viewport on mobile - Make RadioGroup button background transparent to match the panel
When in fullscreen mode, a "Code" toggle switch appears in the footer to show/hide the editor panel (switching between 'all' and 'preview' modes). The fullscreen button now always means enter/exit fullscreen.
…queries The mobile @media and @container rules inside .box set height: 800px and resizable height: 370px !important, which overrode the fullscreen 100dvh. Using !important on the fullscreen height ensures it always wins regardless of viewport width.
Huxpro
force-pushed
the
Huxpro/add-fullscreen
branch
from
5d4a5b1 to
a7f634f
Compare
When entering fullscreen from a narrow container (e.g., mobile preview wrapper with container-type: inline-size), the @container query rules still fire based on the parent's width, causing vertical stacking and resizable width override. Add !important overrides in .box-fullscreen for code-wrap sizing and resize handler visibility.
The example-metadata.json was force-added during rebase conflict resolution but belongs in gitignored example/public/lynx-examples/.
…screen modes Replace the two-branch Resizable (with different keys) with a single instance that imperatively resets its internal size state on mode switch. This keeps the lynx-view mounted across vertical/horizontal transitions, eliminating the repeated loading overlay. Also fix mobile fullscreen resize by scoping the `width: 100% !important` override to non-fullscreen only, and remove the maxWidth cap in fullscreen so the preview panel can expand freely.
- Add drag-to-collapse for both preview and code panels (horizontal + vertical) - Show Code toggle in desktop mode, simplify fullscreen button behavior - Symmetric collapse/expand: both panels snap back if drag doesn't pass threshold - Symmetric soft max: both panels protected with SOFT_MIN (200px) - Visual hints (overlay) when entering snap zone during drag - Collapsed panels close fully (0px gap) with visible drag indicator on hover - Remove fullscreen special-casing — fullscreen is just a larger container
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
1 participant
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.
Ports the fullscreen feature from the fork PR. Adds a fullscreen toggle button to the Go component preview that expands it to fill the viewport while keeping all chrome (tabs, footer). Users can exit by pressing Escape or clicking the button again. Includes iOS Safari safe area support and a subtle enter animation.
Changes
Closes the feature request from Huxpro/vue-lynx#40.