Required consent gates not showing with mobile devices with enlarged font, no scroll available

Video SDK Web
,
1

Title: UI Toolkit 2.4.5-1: recording-consent and Join Audio dialogs clip their own buttons/text at large browser font sizes, with no way to scroll

Environment

  • @zoom/videosdk-ui-toolkit 2.4.5-1 (the CDN-hosted ESM bundle)
  • Chromium + mobile Safari; reproduced in a live Video SDK session
  • Trigger: enlarged browser/OS text size (iOS Dynamic Type, or a raised browser default font size). Everything is fine at default type.

Two separate dialogs become unusable at large type. Both are laid out in rem units, so the content grows while the container does not.

1. Recording-consent dialog (“This meeting is being recorded”)

The alert overlay centres its panel with align-items: center and sets no overflow; the panel sets no max-height:

<div class="fixed inset-0 flex items-center justify-center bg-black/50">
  <div id="uikit-recording-notification" class="p-8 w-full max-w-lg …">
    …title… …consent copy… [Leave] [Stay]

A centred flex item taller than its container overflows symmetrically, so content is cut off at the top and bottom, and because the overlay is overflow: visible nothing scrolls. The participant can neither accept nor dismiss the notice.

Measured at 34px root font size in a real session:

  • panel overhangs its container by 688px
  • overlay overflow-y computes to visible
  • the “Stay” button is outside the overlay and fails an elementFromPoint() hit test — it is not merely off-screen, it is unclickable

Note the container is often smaller than the viewport: an ancestor with backdrop-filter establishes the containing block, so inset: 0 resolves to the video area rather than the window.

Suggested fix: give the overlay overflow-y: auto and stop it clipping at the start edge — e.g. align-items: flex-start with margin: auto on the panel (centres when it fits, yields when it doesn’t), or align-items: safe center. A max-height + internal scroll on the panel works equally well.

2. Join Audio dialog (“Would you like to join audio for this session?”)

Different cause, same outcome. The shell receives a hardcoded pixel height and wraps its content in two overflow-hidden divs:

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black p-4">
  <div class="rounded-lg shadow-lg …" style="…height: 190px">
    <div class="p-4 flex h-full min-h-0 overflow-hidden">
      <div class="flex-grow ml-2 min-h-0 flex flex-col overflow-hidden">
        <div class="flex flex-col h-full justify-between">   ← content

At 34px root font size, 260px of content is hidden and the title and body text are pushed outside the shell entirely. Nothing scrolls.

The shell already carries max-height: calc(100vh - 4rem) inline, so simply dropping the fixed height: 190px (letting it size to content up to that max-height) and making the inner column the scroll container resolves it without any risk of the dialog running off-screen.

3. Related: backdrop tap on the recording notice leaves the session

The shared alert shell handles backdrop clicks as:

onClick = (e) => { e.target === e.currentTarget && (onClose ? onClose() : onCancel()) }

The recording notification passes onCancel (which calls client.leave(false)) but no onClose, so tapping the dimmed area leaves the session rather than dismissing the notice. Combined with issue #1 this is a trap: the button is unreachable, and tapping anywhere else disconnects you. A dedicated onClose (or ignoring backdrop clicks on this dialog) would be safer.

These are on the critical path for participants joining a call, and #2 gates joining audio at all — a participant who can’t reach those buttons is in the session but silent. Happy to provide further detail or a reduced repro.

2

Hi @Matthew17 I reached out to our engineering team to take a look into this. I will keep you updated on their findings!