fix class name typo and include it in safelist

[ruslandoga]

Changes

Fixes #2514

This PR fixes the class name used for embedded dashboards and includes it in a safelist to avoid purging.

Tests

• This PR does not require tests

Changelog

• This PR does not make a user-facing change

Documentation

• This change does not need a documentation update

Dark mode

• The UI has been tested both in dark and light mode

[ruslandoga]

not sure if it was supported in tailwind v1 or v2 or if it's just a typo, but there doesn't seem to be a max-width-screen-lg class anymore: https://tailwindcss.com/docs/max-width

---

seems like it was a typo introduced in #2148

[bundlemon]

BundleMon

Unchanged files (8)

Status	Path	Size	Limits
✅	static/css/app.css	515.18KB	-
✅	static/js/dashboard.js	297.78KB	-
✅	static/js/sentry-bundle-5.9.1-min.js	15.7KB	-
✅	static/js/app.js	12.13KB	-
✅	static/js/embed.host.js	5.58KB	-
✅	static/js/embed.content.js	5.06KB	-
✅	tracker/js/plausible.js	748B	-
✅	static/js/applyTheme.js	314B	-

No change in files bundle size

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[vinibrsl]

Good catch! Thanks for adding to the safelist :)

[vinibrsl]

One concern: the embed dashboard is quite difficult to test because people use it in very different setups. If this class wasn't being applied, what do you think of actually removing it to keep to same behavior?

[ruslandoga]

I know @metmarkosaric uses the embedded dashboard: https://markosaric.com/stats/, so we can ask him what to do :)

With the fix it looks like this:

[metmarkosaric]

looks the same to me? any difference that i don't see?

[ruslandoga]

Right now it looks like this (full width):

[metmarkosaric]

ah ok so with this change we don't allow people to choose the width or if it's not specified we show narrow width rather than full width by default?

[ruslandoga]

if it's not specified we show narrow width rather than full width by default

This.

[metmarkosaric]

hmm i'm unsure if this breaks the UI and design of some people that are happy with the full width. is there a reason to change this at all? seems fine to me the way it is. full width by default but you get to pick a manual width if you prefer that. it's already documented too

[ruslandoga]

is there a reason to change this at all?

Full width by default is a bug: #2514.
This PR actually reverts a change in the defaults to the way it was before #2148.

it's already documented too

From https://plausible.io/docs/embed-dashboard#manual-width-mode:

Normally, the embedded dashboard will render with a couple internal CSS rules that contain the dashboard:

[metmarkosaric]

ok cool. i guess it's fine if this change wasn't intentional but a mistake. it's not something we discussed either. i'll let Vini decide

[metmarkosaric]

narrow by default does look nicer!

[vinibrsl]

Thanks, @ruslandoga!