[CAL-1157] Embed Issues - Reported on Slack

[hariombalhara]

Hey everyone, having some issues with the http://cal.com|cal.com embed and was directed by support to join the Slack.

Verify the issues and fix them.

I was embedding my calendar on the coming soon page for my web agency and I found three bugs with the inline embed. All 3 of them are observable in the CodeSandbox demos (and I can also throw up a link if it's helpful to see my implementation).

1. ~The first bug is that when it displays the screen for a successfully scheduled meeting, it's bigger than its container. So what happens is the bottom gets cut off and it creates an internal scrollbar to see the cut-off portion. I fixed this by implementing my own quick and simple booking success screen (which doesn't necessarily size properly at this point in time, would need to use the __dimensionChanged action).~
2. The timezone/time options selector on desktop gets cut off at the bottom. I fixed this by giving the container wrapping the embed extra height to account for it and then overriding the styling of the iframe to fill the height of the container.
3. The loading indicator is (very noticeably on mobile) off-centred because it's positioned at left: 50% which doesn't take into account the width of the indicator itself which is 30px. It should be left: calc (50% - 15px). Its vertical positioning has the same issue but is less noticeable~
4. Also, not a bug but a UX problem present in the regular booking pages as well (not specific to the embed) is that on mobile the date selection should move to a new screen instead of keeping the rest visible, which is how Calendly handles it. I've actually even had a couple of my friends comment on it who I've had test some of my booking stuff. This is kinda important regardless of whether I use the embed because I imagine I'm not the only one to find this clunky, and it affects everyone.

Also, just a quick question, is there any way for me to easily just build out my own http://cal.com|cal.com widget?

Slack Messag

_{From SyncLinear.com | CAL-1157}

[hariombalhara]

I am not sure what exact problem is there re: point 4. UX wise maybe @Jaibles can comment.
If it's about not able to discover that there are timeslots below the fold, that problem is solved already by doing an automatic scroll to time slots when user first lands on the page.

[hariombalhara]

re: point 2. This is the behaviour. I think @Udit-takkar(not sure though) you did some work on making sure that select isn't cut off. Maybe you can take care of it.

Outside Embed

Embed:

[hariombalhara]

1 and 3 are fixed.

[hariombalhara]

@Udit-takkar Only point 2 is pending here, so assigning to you.