# Video SDK + UI Tool Kit on iPhone

**URL:** <https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862>\
**Category:** iOS\
**Created:** [April 24, 2025, 4:07am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862 "2025-04-24T04:07:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![user64](https://avatars.discourse-cdn.com/v4/letter/u/dec6dc/32.png) [@user64](https://devforum.zoom.us/u/user64)\
**Post date:** [April 24, 2025, 4:07am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862/1 "2025-04-24T04:07:10Z")

</div>

**Current Implementation**  
We are currently developing a service that enables face-to-face interviews between two parties using a video SDK. For the user interface implementation, we are directly utilizing the UI Tool Kit provided by Zoom.

**Display Issues**  
When viewing the interview screen on an iPhone in portrait orientation, only one toolbar button is visible, and the user’s own video feed does not appear. Switching to landscape orientation allows the user’s video to display and slightly more buttons to become visible.

**Question**  
How can we adjust the layout to ensure both participants’ video feeds and additional functional buttons remain fully visible in portrait orientation?

---

<div class="post-metadata">

**Author:** ![user64](https://avatars.discourse-cdn.com/v4/letter/u/dec6dc/32.png) [@user64](https://devforum.zoom.us/u/user64)\
**Post date:** [April 25, 2025, 8:11am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862/2 "2025-04-25T08:11:35Z")

</div>

Information:

iPhone: iPhone SE  
iOS ver: 18.3.2  
VideoSDK, UI toolkit ver :  
“@zoom/videosdk”: “^2.1.5”,  
“@zoom/videosdk-ui-toolkit”: “^2.1.0-1”,

---

<div class="post-metadata">

**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\
**Post date:** [April 30, 2025, 9:36am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862/3 "2025-04-30T09:36:51Z")

</div>

Hi @user64

Have you tried `v2.1.10-2`? Here’s a screenshot of how it would look like on an iPhone SE. Tapping the screen unhides the toolbars.

 ![Screenshot 2025-04-30 at 3.05.54 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/8/987d1f7202ffa83363db40a45bad81ba88e792de.jpeg)

Can you share a screenshot of what you’re seeing instead?

---

<div class="post-metadata">

**Author:** ![user64](https://avatars.discourse-cdn.com/v4/letter/u/dec6dc/32.png) [@user64](https://devforum.zoom.us/u/user64)\
**Post date:** [May 30, 2025, 9:19am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862/4 "2025-05-30T09:19:58Z")

</div>

Hello [Ekaansh]

Sorry for the delayed response.  
We are adjusting the size using calc() because displaying the UI Toolkit across the entire screen would exceed the screen height and result in poor usability.  
The current UI is implemented as follows:

```javascript
<Stack
  width="100%"
  height="100vh"
  flexDirection="column"
  justifyContent="center"
  alignItems="center"
  bgcolor="#000"
>
  <Box
    id="sessionContainer"
    sx={{
      width: 'calc(100vw - 460px)',
      backgroundColor: '#000',
    }}
  />
</Stack>

```

We are using MUI v6 as our UI framework.  
The issue where component sizes become too small on smartphones is due to a problem with the calc() settings, but I’m wondering if it’s possible to display it to fit the screen width without adjusting the size at all?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [May 30, 2026, 9:20am UTC](https://devforum.zoom.us/t/video-sdk-ui-tool-kit-on-iphone/131862/5 "2026-05-30T09:20:56Z")

</div>

Closed on May 30, 2026, 9:20am UTC

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.