ref(feedback): update small screen ui V2 #99229
Conversation
| ) | ||
| } | ||
| estimateSize={() => 24} | ||
| estimateSize={() => 80} |
There was a problem hiding this comment.
i think this should be the estimated size of the infinite list item, which is 80px.
| if (feedbackId) { | ||
| window.scrollTo(0, 0); |
There was a problem hiding this comment.
scrolls the feedback item to the top (same as current behavior on large screens)
|
|
||
| scrollContainer.scrollTo({ | ||
| top: scrollPosition, | ||
| behavior: 'auto', |
There was a problem hiding this comment.
intentionally auto. smooth sometimes gets stuck and requires 2 clicks of the button, and i've found that it happens less with auto.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| 'details'; | ||
| grid-template-rows: ${p => | ||
| p.hideTop ? '0fr minmax(0, 100vh)' : 'max-content minmax(100vh, 1fr)'}; | ||
| grid-template-areas: ${p => (p.hideTop ? "'.' 'content'" : "'top' 'content'")}; |
There was a problem hiding this comment.
lint was complaining if we only have 'content' and not '.' 'content' since it expects 2 rows for both hideTop and !hideTop cases but this works fine too
|
feedback from @jas-kas: "i think all these buttons (actions) could be in a context menu, or some could be replaced by an icon. like how gmail does it" created a followup ticket for this: https://linear.app/getsentry/issue/REPLAY-693/feedback-actions-on-small-screens-should-be-optimized-for-space |
changes
implements a more mobile-friendly version of the user feedback UI when the screen is small. inspired by the phone mail app layout -- when the screen is small, either the list OR the feedback item is visible (not both). clicking an item on the list takes you to the feedback item, and there's a button to go back to the main list.
scroll:
since scroll position is not remembered by the virtualized list, i added a "jump to selected item" button that takes the user to (approximately) where they were in the list. it's not perfect, and the button also never goes away once the item is in view -- this would be a nice followup to implement.
main list:
when item is selected:
note the search + filters are hidden in this view since they're not useful.
full demo:
Screen.Recording.2025-09-10.at.3.46.08.PM.mov
selected item / jump button resets when filters & search query changes:
Screen.Recording.2025-09-10.at.4.21.04.PM.mov