Widget does not initialize with correct width

[SIRHAMY]

Overview

I'm embedding the widget in my Svelte site. The widget seems to initially be the correct size then it re-renders to the incorrect size (thinks it's fullscreen but not).

It will then re-size to the correct size if I manually resize my screen but otherwise is incorrect.

What I expect to happen

• Widget should be able to inherit the correct width from whatever div it gets loaded into

What actually happens

• Widget seems to load in with incorrect size -> I can track this down to size="hide"
• If I resize the screen then it will change itself to size="sm" which seems to fix the problem

Repro

How to repro:

• It's currently live here: https://hamy.xyz/blog/2022-10-taking-climate-clock-action

You can also repro in svelte repl:

Code:

<div style="width: 440px">
	<script src="https://climateclock.world/widget-v2.js" async></script>
		<climate-clock />
</div>

[SIRHAMY]

To be fair, it does seem like the widget loads with the correct width in normal HTML so this may actually be a Svelte / SvelteKit issue with iframe sizing / setting the correct params.

Working code in codepen:

<div style="width: 440px">
	<script src="https://climateclock.world/widget-v2.js" async></script>
		<climate-clock />
</div>

[raeabileah]

Howdy, please remove me from this list. The Climate Clock is no longer under the Beautiful Trouble umbrella. Thank you.

…

On Oct 16, 2022, at 4:11 PM, Hamilton Greene ***@***.***> wrote: To be fair, it does seem like the widget loads with the correct width in normal HTML so this may actually be a Svelte / SvelteKit issue with iframe sizing / setting the correct params. Working code in codepen: <div style="width: 440px"> <script src="https://climateclock.world/widget-v2.js" async></script> <climate-clock /> </div> — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACPMVXJ7YVHVUL3UB5PTYRLWDSDRTANCNFSM6AAAAAARGRSFJY>. You are receiving this because you are subscribed to this thread.

[shwaydogg]

@SIRHAMY If you want a quick CSS fix you could apply the following CCS to make it wider. Without looking deeper i think the JS is checking the width of the full view port and using that decide the display settings rather than the size of the element. We will be deprecating this version of the widget in the near future, let me know if you'd be interested in working on the next iteration with more features! If so you can jump on our slack here and message me: https://join.slack.com/t/climate-clock/shared_invite/zt-1ieksunf4-1UI2PAwN78JLlNgaMN7Rug

position: fixed;
    width: 70%;
    left: 15%;

[adrian-the-git]

For any who stumble into this, the viewport size is only referenced to determine whether the window was resized, because we couldn't yet use ResizeObserver. The widget is supposed to size itself to its container, and if it doesn't, that's a bug.