fix: make feedback tab survey display responsive #1704
Conversation
|
@bvosk is attempting to deploy a commit to the PostHog Team on Vercel. A member of the Team first needs to authorize it. |
| @@ -701,7 +701,6 @@ export function FeedbackWidget({ | |||
| }): JSX.Element { | |||
| const [showSurvey, setShowSurvey] = useState(false) | |||
| const [styleOverrides, setStyle] = useState({}) | |||
| const widgetRef = useRef<HTMLDivElement>(null) | |||
There was a problem hiding this comment.
I ended up removing this as it's no longer needed. It muddies up the diff quite a bit, but have a look at the individual commits if you'd like to separate this change from the rest.
| right: 'right: 30px;', | ||
| right: 'right: 60px;', |
There was a problem hiding this comment.
Repeating my commit message here for discussion. This wasn't strictly necessary to fix the reported issue, but I believe this fix created this problem of overlap with the feedback button. Perhaps fixing this overlap motivated the style override in the first place. Not sure.
The 30px tucks the survey right in the bottom right corner of the page when it's presented as a popover. But overlaps with the feedback button when presented in that manner.
I'm opting to solve this by adding additional clearance in both configurations in favor of simplicity. It could be handled conditionally, but that would require some more logic.
The "more logic" is more than I originally thought because - the way things are today - a user can configure a popover survey with a
appearance.widgetTypeof tab. So properly handling this requires either adding validation to make that impossible or passing the whole survey - not justSurveyAppearanceinto thisstyleutility function. Passing on that for now although there's a case for it.
Here's how it looks with the unchanged right: 30px style.
|
This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the |
|
This PR was closed due to lack of activity. Feel free to reopen if it's still relevant. |
|
hey @bvosk thanks for the contribution! apologizes it took me a while to check it out. From the GIFs it looks great! there are a couple conflicts, do you mind resolving them when you have some time? I'll also review the code and test it out locally tomorrow |
The problem here is the `left` style applied to the element. This overrides with the styles applied in `surveys-utils.tsx`. Since the styles applied there are already responsive, removing this fixes the issue. The styles in `surveys-utils.tsx` are also more respectful of the survey's appearance configuration (left, center, right), so this actually fixes another unreported issue where the survey doesn't appear in the true center of the page.
The 30px tucks the survey right in the bottom right corner of the page when it's presented as a popover. But overlaps with the feedback button when presented in that manner. I'm opting to solve this by adding additional clearance in both configurations in favor of simplicity. It could be handled conditionally, but that would require some more logic. The "more logic" is more than I originally thought because - the way things are today - a user can configure a popover survey with a `appearance.widgetType` of tab. So properly handling this requires either adding validation to make that impossible or passing the whole survey - not just `SurveyAppearance` into this `style` utility function. Passing on that for now although there's a case for it.
bvosk
force-pushed
the
fix/make-survey-feedback-tab-responsive
branch
from
fe326c3 to
6afb6e2
Compare
|
Sure thing @lucasheriques. Went ahead and rebased it as requested. Thanks very much! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR improves survey feedback tab responsiveness by adjusting widget positioning and removing conflicting style overrides.
- Changed right position from 30px to 60px in
surveys-extension-utils.tsxfor better widget placement - Removed unnecessary style overrides and positioning logic in
surveys.tsxthat were breaking responsiveness - Added responsive testing with 375x667 viewport in
feedback-widget.spec.ts - Potential risk with lack of cross-browser testing, though changes are minimal CSS adjustments
💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!
3 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
bvosk
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
this looks great, thank you so much @bvosk
finally this is working as expected ❤️
lucasheriques
added
bump patch
Changes
Closes PostHog/posthog#27982
Before
After
Discussion
Ultimately the issue here is that there are some styles in
src/extensions/surveys.tsxthat override the ones insrc/extensions/surveys/surveys-utils.tsx. So this was just a matter of removing the override causing the problem.In addition to the lack of responsive behavior, this same style was causing some positioning to be off on some device widths. Here's an example of that with the
centerposition:Checklist