fix(send): mobile file info panel — dismissable & non-blocking (reviewed) (#977)#987
Open
aaspinwall wants to merge 2 commits into
Open
fix(send): mobile file info panel — dismissable & non-blocking (reviewed) (#977)#987aaspinwall wants to merge 2 commits into
aaspinwall wants to merge 2 commits into
Conversation
…ng (#977) On the "Your Files" page on a narrow/mobile viewport the file info panel was a fixed side column that overlapped the file list, covering the row delete button. The panel also had no delete button of its own and no way to close it. - HomeView: the info panel is the original inline column on desktop (md+) but a full-screen, dismissable overlay below md (max-md: scoped), and only renders when a file/folder is selected. - FileInfo: add a close (X) button and a delete button (reusing the existing delete confirmation modal). - FolderInfo: add a matching close button (shares the overlay). - FolderView: file-row download/delete buttons are visible on mobile instead of hover-only, so the row delete button is tappable on touch. - folder-store: add clearSelection() used by the close controls and deleteItem. Adds a Firefox mobile-viewport Playwright suite that registers, uploads, opens the panel, and verifies close + delete work on a 412px viewport. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- HomeView: keep the desktop info-panel column always present (empty until a selection) so desktop no longer reflows on select/deselect; the mobile full-screen overlay is applied via conditional max-md: classes only when a file/folder is selected, and hidden on mobile otherwise. - FolderView: add @click.stop to the row download button so tapping it on mobile no longer also opens the info-panel overlay on top of the download modal. - FileInfo: guard onDeleteConfirm against a null selectedFile; bind the close button directly to folderStore.clearSelection (drop the trivial wrapper). - FolderInfo: bind the close button directly to folderStore.clearSelection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Supersedes #986. Same fix for #977, plus fixes from a senior code review.
What changed?
Fixes the mobile behavior of the file info panel on the Your Files page:
HomeView.vue— the info panel is the original always-present inlinew-64column on desktop (md+), so desktop layout is unchanged and does not reflow on select/deselect. Belowmdit is hidden until a file/folder is selected, then shown as a full-screen, dismissable overlay (z above the app nav).FileInfo.vue— added a close (X) button and a delete button (reusing the existingDeleteModal+DeleteConfirmationflow);onDeleteConfirmguards against a null selection.FolderInfo.vue— added a matching close button (shares the overlay).FolderView.vue— file-row download/delete buttons are visible on mobile (were hover-only), and the download button now@click.stops so tapping it doesn't also open the panel overlay on top of the download modal.folder-store.ts— addedclearSelection(), used by the close controls anddeleteItem.Review fixes applied over #986
max-md:classes only when something is selected.@click.stopadded to the row download button (previously a tap opened both the download modal and the info overlay on mobile).onDeleteConfirm; close buttons bound directly tofolderStore.clearSelection(dropped trivial wrappers).AI disclosure: Implemented and reviewed by Claude (agentic), with the author directing the task, running a senior-code-review pass, and approving the fixes. Verified via the new Playwright suite; ESLint and (frontend) typecheck clean on the changed files.
Why?
Per #977, on mobile the info panel covered the file's delete button, had no delete button of its own, and could not be closed. The panel is now an overlay that doesn't cover the list, can be closed, and can delete the file itself.
Limitations and Notes
mdbehavior changed.--grep @dev-desktop) is flaky (share-link/session timing, Flaky Send E2E: 'No Group found' after register/login leaves folder view empty, cascades into folder-row/goto failures #930) and fails a few tests on a clean tree too — unrelated to this change.Applicable Issues
Closes #977
Screenshots
Captured by the mobile suite: the info panel renders as a full-screen overlay with a close (X) and a red delete button; after closing, the file list and its row action buttons are fully accessible.
🤖 Generated with Claude Code