Avoid Automatic Zoom-in on focus on text inputs iOS

[samuel-skean]

Likely caused by font-size being smaller than 16px.

[macpayton26]

In CreateMeetingForm.css, added:

.prevent-ios-zoom, input, select, textarea, button, .wide-input, .time-input {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

According to Samuel, works on iOS. Need to fix timezone box.

[macpayton26]

In CreateMeetingForm.css, added:

/* Keep long select contents inside the card bounds */
.timezone-row .time-group {
  flex: 1 1 0;
  min-width: 0; /* allow flex child to shrink below its content width */
}

.timezone-row select,
.timezone-row .wide-input,
.timezone-row .time-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[macpayton26]

For the iOS issue on the availability page, added to AvailabilityPage.css:

/* Prevent iOS Safari auto-zoom on form controls */
.prevent-ios-zoom input,
.prevent-ios-zoom select,
.prevent-ios-zoom textarea,
.prevent-ios-zoom button,
.prevent-ios-zoom .wide-input,
.prevent-ios-zoom .time-input {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

(As of 19:52 on W 12/3, have not pushed to /dev branch yet

[samuel-skean]

The issue still seems to exist on the availability route. (video evidence: https://drive.google.com/file/d/19F88HUkjjFGLvoAVhQJAkmuYzTAXOr6W/view?usp=sharing) Have you pushed your changes? Despite the brokenness due to CSP, I think you could safely push.

[macpayton26]

Missed this page completely - my apologies. Just patched on \dev branch.