Bug: Availability component loading bar is out of place

[yifanplanet]

Code changes

• Set days container to position relative default

Screenshots

Before

After

Readiness checklist

• Included before/after screenshots, if the change is visual

Explanations

TLDR:

Make sure to manually set the position CSS property other than initial on the element with bind:clientWidth, clientHeight, offsetWidth and offsetHeight. Otherwise it might get added with an inline position: relative during compile, which could break the layout unexpectedly.

This is more complicated than I expected. This progress bar's visual went out of place for several times in our PR history.

• First time: 222
• It was fixed here: 241
• And it went wrong again here: Removal of the {:else if} at line 1492 of components/availability/src/Availability.svelte

By comparing the different versions above you can see on #222 and #242, the <div class="days schedule"> has an inline style position: relative added.

This is caused by the bind:clientWidth binding we have on this element, which adds this inline position: relative during compile and breaks the layout.
It seems like an unsolved issue of Svelte in Firefox, but it somehow happens in Chrome as well in my testing (which will be triggered by accessing props of the _this.calendars before mount).

References

• Svelte Twitter
• Dimension bindings intermittently add inline style="position:relative;" in Firefox

License

I confirm that this contribution is made under the terms of the MIT license and that I have the authority necessary to make this contribution on behalf of its copyright owner.

[shortcut-integration]

This pull request has been linked to Shortcut Story #76439: Bug: Availability component loading bar is out of place.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nylas/components/HWGvQvvNn77uXSPGNWsEvh83SCwE
✅ Preview: https://components-git-yifan-sc-76439availability-loadingbar-fix-nylas.vercel.app