fix(surveys): polishing the popup survey UI

[dmarticus]

Changes

Closes issues 1,3, and 4 from this ticket PostHog/posthog#20851.

Fixing 4 requires some changes to posthog, too: PostHog/posthog#23460

Issue 2 I wasn't able to reproduce; I need more context from @annikaschmid and/or @jurajmajerik

Quick note on browser compatibility: I'm using the :has pseudo-selector for determining whether to apply margins or not. Per caniuse, this has been supported in all major browsers since 2023, but is this a risky change still?

Visual Diff For Part 1

Before

After

Visual Diff for Part 3

Before

After

Visual Diff for Part 4

Before

After

...

Checklist

• Tests for new code (see advice on the tests we use)
• I manually tested this for each survey type
• Accounted for the impact of any changes across different browsers
• Accounted for backwards compatibility of any changes (no breaking changes in posthog-js!)

[vercel]

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

Name	Status	Preview	Updated (UTC)
posthog-js	✅ Ready (Inspect)	Visit Preview	Jul 3, 2024 8:41pm

[github-actions]

Size Change: +34.5 kB (+3.1%)

Total Size: 1.15 MB

Filename	Size	Change
dist/array.full.js	316 kB	+1.18 kB (+0.37%)
dist/array.js	154 kB	+10.5 kB (+7.34%)	🔍
dist/main.js	155 kB	+10.5 kB (+7.3%)	🔍
dist/module.js	154 kB	+10.5 kB (+7.34%)	🔍
dist/recorder-v2.js	110 kB	+1.38 kB (+1.27%)
dist/recorder.js	110 kB	+1.38 kB (+1.27%)
dist/surveys-preview.js	59.6 kB	-748 B (-1.24%)
dist/surveys.js	64.6 kB	-301 B (-0.46%)

ℹ️ View Unchanged

Filename	Size
dist/exception-autocapture.js	10.4 kB
dist/tracing-headers.js	8.26 kB
dist/web-vitals.js	5.79 kB

_{compressed-size-action}

[dmarticus]

I only want to remove the margin in the event where there's no description (the selector is gone) AND there's no question (the selector is empty). Otherwise, the margins should remain.

[jurajmajerik]

I'm using the :has pseudo-selector ... supported in all major browsers since 2023, but is this a risky change still?

This is fine in my opinion. It's a small styling detail that just won't work in a tiny minority of cases.

[jurajmajerik]

While you're at it, can you please also check the emoji color under the "New survey" view?

[jurajmajerik]

Hmm, the emojis are still white for me, both in the preview and the live survey:

[jurajmajerik]

Same goes for the top margin:

I thought maybe I wasn't linking posthog-js properly, but not the case - I can see the new stylesheet under Sources/surveys-utils.tsx and the confirmation message is being sized correctly.

[jurajmajerik]

Issue 2 I wasn't able to reproduce

This is more like a feature request than a bug - we currently don't allow customization of the confirmation message text. Feel free to address in a follow up :)

[dmarticus]

@jurajmajerik yeah, I haven't finished part 4 yet, sorry! I thought I'd gotten it working but it's not ready.

[dmarticus]

Same goes for the top margin:

I thought maybe I wasn't linking posthog-js properly, but not the case - I can see the new stylesheet under Sources/surveys-utils.tsx and the confirmation message is being sized correctly.

Wait, so are you saying you can't reproduce the top margin being re-sized correctly?

This is what I see when I run it with posthog-js locally

[jurajmajerik]

There's indeed something going wrong with my posthog-js linking. I've just sunk an hour trying to figure it out, but I'm gonna cut my losses - I trust you this is working :)