fix(surveys): textarea border box was being set in the preview but not in the surveys rendered on user websites

[dmarticus]

Changes

Issue identified here: https://posthog.slack.com/archives/C074A08LP1B/p1722845257000019?thread_ts=1722508627.577449&cid=C074A08LP1B

This issue came from me trying to fix the textarea size for free response surveys. My fix made the survey preview rendering work correctly, but it was too wide for the popover rendering (which is more important; that's the thing the end users see!)

Before:

and

I fixed this to add an explicit border box into the textarea. In the preview, it was inheriting a border box already, so this wasn't a problem, but since the rendered survey has a different DOM tree, with different stylings, it didn't work for end users.

This fix should work for both.

After (on page):

After (in preview section):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
posthog-js	✅ Ready (Inspect)	Visit Preview	Aug 5, 2024 2:52pm

[github-actions]

Size Change: +117 B (+0.01%)

Total Size: 1.16 MB

Filename	Size	Change
dist/array.full.js	333 kB	+39 B (+0.01%)
dist/surveys-preview.js	59.6 kB	+39 B (+0.07%)
dist/surveys.js	65.7 kB	+39 B (+0.06%)

ℹ️ View Unchanged

Filename	Size
dist/array.js	154 kB
dist/exception-autocapture.js	10.4 kB
dist/main.js	154 kB
dist/module.js	154 kB
dist/recorder-v2.js	110 kB
dist/recorder.js	110 kB
dist/tracing-headers.js	8.26 kB
dist/web-vitals.js	5.79 kB

_{compressed-size-action}

[Phanatic]

Ship it