[CAL-3894] Make the meeting duration time more visually toggleable

[Andrew-S-Rosen]

Is your proposal related to a problem?

When a user goes to book a meeting, it is not immediately obvious that there is a way for them to alter the meeting duration. Everyone knows the middle section is where you pick the date, and the list of time slots on the right clearly invites the user to pick one. However, it is not obvious to everyone that the meeting duration time on the left can be toggled. Most of the items on the left are simply metadata that are not toggleable. While the timezone can be toggled, since it's determined automatically, most won't bother. This means that people are not focusing their attention on the left panel.

Describe the solution you'd like

There are some nice solutions by people on Twitter when I posted about this: https://x.com/peer_rich/status/1782166947636932930.

One suggestion: "I would try it on the right above the time selection. Maybe reduce target size of 12hr/24hr bc that seems less important to me than duration, and might be mostly inferred by region?"

Another suggestion was a slider of sorts that makes it clearer it can be toggled:

Either is reasonable to consider, but the former seems more straightforward.

Describe alternatives you've considered

Not changing it, naturally.

House rules

• If this issue has a 🚨 needs approval label, don't start coding yet. Wait until a core member approves feature request by removing this label, then you can start coding.
  • For clarity: Non-core member issues automatically get the 🚨 needs approval label.
  • Your feature ideas are invaluable to us! However, they undergo review to ensure alignment with the product's direction.

_CAL-3894

[PeerRich]

@ciaranha

[PeerRich]

agree, can be improved

[ciaranha]

Yea I like that. Will definitely mock it up 👍

[anikdhabal]

@ciaranha @PeerRich

[ciaranha]

@bcakici edit it here.

[hariombalhara]

@ciaranha Is the design that @anikdhabal shared good to go? Asking because figma isn't updated and there is 'needs design' label still

[ciaranha]

@hariombalhara no we needed to update the design that's why the label was there. Removed now.
https://www.figma.com/design/UajFu4M1APhn2AywAEJkJr/New-Features?node-id=21929-15548&m=dev