Inconsistent panel sizes?

I released an extension today to the public that was displaying fine in dev rig, in browser preview, and when I previewed it on my stream in hosted mode, as well as live on my Twitch channel right now.

image

However on a friend’s channel, it looks like this…
image

Specifically the issue is that the vertical scroll bar kicks in which in turn causes several elements to pop under. If I inspect the version on my channel it immediately breaks and looks like the second image as well. I couldn’t find any specific guidance on a target width for extensions so I went off of what looked safe in testing. Is there a target width I should never go over? Is there a reason for the inconsistency between the dev rig and the live experience?

1 Like

The internal width dimension of an panel extension is 318px.

Inside that you need to take into account for a scrollbar if you need a scrollbar. Easiest methods is to support a flexible width design, since the extension can look wildly different if a user “pops out” the extension.

I’m sure the docs had some notes in the docs on dimensions but I can’t find them

The dimensions information are on the design part of the doc: https://dev.twitch.tv/docs/extensions/designing/#panel-extensions

2 Likes

The 318px width makes sense. Looking at the structure of the view in the dev rig it looks the difference stems from the dev rig not having a containing div that sets a 1px border. On my channel when I inspect the panel there is this:

<div class="tw-border-l tw-border-r tw-border-t">...</div>

But no equivalent div in the dev rig. Seems like that should probably be corrected to give the best experience in the dev rig. Either the div.view should be set to 318px or there should be a div with a 1px border to give the most accurate preview of what it’ll look like on live.

Thanks for the feedback - we’re going to update the dev rig to provide a more consistent experience with how Extension panels work on a live Twitch channel.

1 Like

I have updated the Developer Rig so it now has the one-pixel border.

1 Like