Missing padding style in gpt app sdk dev mode. impacting mobile layout

Apps added in dev mode missing padding in a parent container (max-sm:px-4). This is causing the inline widget to extend to the edge of screen (past the app logo) in mobile screens.
Devs can’t control this element. How do i know what will happen in production?

Zillow app prod container element:

<div class="no-scrollbar relative mb-2 thread-sm:w-full mx-0 max-sm:-mx-(--thread-content-margin) max-sm:w-[100cqw] max-sm:overflow-hidden max-sm:overflow-visible max-sm:px-4 overflow-visible">

Pizzaz demo and personal dev container element

<div class="no-scrollbar relative mb-2 thread-sm:w-full mx-0 max-sm:-mx-(--thread-content-margin) max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible">

1 Like

zillow prod app in mobile view

This is solved by using "openai/widgetPrefersBorder": True, in resource meta. It gives you the extra padding on mobile in addition to the border.
I think an update is warranted in the sdk. The iframe padding should be provided regardless of border choice. This will keep the widget aligned with the app icon on mobile jsut like is is on desktop regardless of the widgetPrefersBorder option.

1 Like