Add mobile-friendly bottom panel for feedback system #211
Conversation
User request: "I want to work on the auto feedback system in ./docusaurus when I use this on mobile it is often covered up by the browsers built in dictionary/search bubble popup that happens when you select text, we need something that's more of a panel popout from the bottom that shows a simple submission window and then has little selection helper buttons for taking in more text on the right and left of the current selection" Co-Authored-By: Claude <[email protected]>
mergify
bot
added
documentation
There was a problem hiding this comment.
Pull Request Overview
This PR replaces the fixed-position feedback button with a mobile-friendly bottom slide-up panel that appears when users select text. The new implementation includes word-by-word selection expansion controls and uses safe area insets to avoid conflicts with mobile browser UI elements.
Key Changes:
- Introduced a new
FeedbackPanelcomponent that displays as a bottom panel with slide-up animation - Added "Extend left/right" buttons that allow users to expand their text selection by word boundaries
- Implemented mobile-responsive CSS with safe area inset support for iOS devices
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| docusaurus/src/components/Feedback/index.tsx | Updated to import and render FeedbackPanel instead of FeedbackButton |
| docusaurus/src/components/Feedback/FeedbackPanel.tsx | New component implementing the bottom panel UI with selection detection and expansion controls |
| docusaurus/src/components/Feedback/Feedback.module.css | Added comprehensive styling for the panel, buttons, and mobile-responsive layout with dark mode support |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setIsVisible(false); | ||
| setSelectedText(''); | ||
| setSelectionRange(null); | ||
| window.getSelection()?.removeAllRanges(); |
There was a problem hiding this comment.
Clearing the text selection when closing the panel removes user feedback and may be disorienting. Consider preserving the selection so users can see what text they had selected, especially if they accidentally close the panel or want to make a different selection.
| window.getSelection()?.removeAllRanges(); | |
| // Do not clear the user's text selection to preserve feedback |
| let timeoutId: NodeJS.Timeout; | ||
| const debouncedHandleSelection = () => { | ||
| clearTimeout(timeoutId); | ||
| timeoutId = setTimeout(updateSelection, 300); |
There was a problem hiding this comment.
The 300ms debounce delay may feel sluggish on mobile devices where users expect immediate feedback after lifting their finger. Consider reducing this to 100-150ms for better responsiveness, especially since the touchend event already signals the end of a selection gesture.
| timeoutId = setTimeout(updateSelection, 300); | |
| timeoutId = setTimeout(updateSelection, 120); |
| newOffset--; | ||
| } | ||
|
|
||
| newOffset = Math.max(0, newOffset + 1); |
There was a problem hiding this comment.
When the word starts at index 0, newOffset will be -1 after the while loop (line 71-72), and Math.max(0, newOffset + 1) results in 1, skipping the first character. The calculation should be Math.max(0, newOffset) after incrementing by 1 only when newOffset is not already at a word boundary.
| newOffset = Math.max(0, newOffset + 1); | |
| newOffset = newOffset < 0 ? 0 : newOffset + 1; |
| z-index: 9999; | ||
| transform: translateY(100%); | ||
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
| max-height: 50vh; |
There was a problem hiding this comment.
A 50vh max-height may be too restrictive on mobile devices in landscape mode where viewport height is very limited. Consider using a larger percentage (e.g., 70vh) or a combination of vh and pixel values to ensure adequate space for content on all orientations.
| max-height: 50vh; | |
| max-height: min(70vh, 600px); |
User request: "can i change the global color scheme of claude to something in the blues and yellows?" Co-Authored-By: Claude <[email protected]>
|
The PR Status Check has failed. Please review the CI logs and fix any issues. Common issues:
You can run checks locally: task test-parallel-fast # Run tests
task lint-parallel # Run linters
uv run tooling/validate_docs.py # Validate docs |
🧪 CI InsightsHere's what we observed from your CI run for 0ca765b. 🟢 All jobs passed!But CI Insights is watching 👀 |
|
The PR Status Check has failed. Please review the CI logs and fix any issues. Common issues:
You can run checks locally: task test-parallel-fast # Run tests
task lint-parallel # Run linters
uv run tooling/validate_docs.py # Validate docs |
Summary
Changes
FeedbackPanel.tsxcomponent with bottom panel UITest plan