Skip to content

feat(feedback): Iterate on css for better scrolling & resizing when browser is small #11893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 6, 2024

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented May 4, 2024

The form is scrollable now when the window is too short:

where img
Mobile SCR-20240503-pdil
Desktop SCR-20240503-pdhy
Desktop w/ screenshot SCR-20240503-pdli

Also, the main page gets overflow:hidden so scroll events don't effect the content behind the modal.

I also added some other tweaks to css:

  • fixed a bug where the foreground wasn't applied to the button
  • another bug where the sentry-logo color would override other icon colors.
  • made z-index a css variable, something to expose later
  • used inset instead of top/right/bottom/left css properties, because overriding it properly is much easier.
  • created a new css var page-margin and used that as the default for insert, which is much easier to use as well
  • tweaked margin/padding of the modal and actor so it's more consistent to place those fixed/floating elements. the css there is more consistent
  • renamed things to Dialog.tsx matches the function it exports... and inlined DialogContent because it's not super interesting and the extra names was annoying.

Fixes: #11842
Fixes: #11843
Fixes: #11844

@ryan953 ryan953 requested a review from a team as a code owner May 4, 2024 01:17
Copy link
Contributor

github-actions bot commented May 4, 2024

size-limit report 📦

Path Size
@sentry/browser 21.65 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing) 32.67 KB (0%)
@sentry/browser (incl. Tracing, Replay) 68.01 KB (0%)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.41 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.05 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.15 KB (-0.04% 🔽)
@sentry/browser (incl. Feedback) 37.66 KB (-0.09% 🔽)
@sentry/browser (incl. sendFeedback) 26.21 KB (0%)
@sentry/browser (incl. FeedbackAsync) 30.84 KB (+0.24% 🔺)
@sentry/react 24.33 KB (0%)
@sentry/react (incl. Tracing) 35.63 KB (0%)
@sentry/vue 25.48 KB (0%)
@sentry/vue (incl. Tracing) 34.46 KB (0%)
@sentry/svelte 21.78 KB (0%)
CDN Bundle 24.14 KB (0%)
CDN Bundle (incl. Tracing) 34.04 KB (0%)
CDN Bundle (incl. Tracing, Replay) 67.71 KB (+0.01% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) 72.92 KB (+0.13% 🔺)
CDN Bundle - uncompressed 70.99 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed 100.98 KB (0%)
CDN Bundle (incl. Tracing, Replay) - uncompressed 210.59 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 223.87 KB (+0.11% 🔺)
@sentry/nextjs (client) 34.86 KB (+0.01% 🔺)
@sentry/sveltekit (client) 33.23 KB (0%)
@sentry/node 145.71 KB (+0.01% 🔺)

@ryan953 ryan953 merged commit 78804ae into develop May 6, 2024
97 checks passed
@ryan953 ryan953 deleted the ryan953/feedback-css branch May 6, 2024 13:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants