Playground recent UI changes broke mobile experience

OpenAI’s Playground is awesome, but RECENT CHANGES to the USER INTERFACE are terrible in mobile!

I now can’t see my Presets anymore (unless I pivot my phone to Landscape), and also a lot of the time scrolling vertically doesn’t work like it used to (depending on where the focus is – it now feels unpredictable, unlike before when it was perfectly intuitive).

I love the Playground, and since Spring of 2023 I have been using it hundreds of times per week; I really hope the OpenAI web app team consider reverting some of the UI changes until it works in mobile the way it used to (aka PERFECTLY).

PS: hopefully it is just some CSS that can be tweaked so Portrait and Landscape work the same re. visibility of the Presets dropdown (because I select inside that dropdown A LOT, but rarely select inside the Chat dropdown… and I am guessing that is true for many people!)

Thanks folks.

PPS: in response to the now-closed thread’s reply…

community . openai . com/t/playground-doesnt-work-properly/536531/9

I use OpenAI’s Playground because it is perfect for the way I have always wanted to use ChatGPT, far more flexible than the normal web UI (Presets + easy editing of previous chunks of the current conversation) but without being overly cumbersome due to feature creep (like some web apps eventually grow into).

I would have had to build something like it if it didn’t exist, I was very happy when I discovered it. And now I don’t want new features added to it, but I am suddenly miserable that some regressive bugs were introduced that broke some of the UI, and right now I have no desire to do a deep dive into the CSS let alone reinvent the entire previously-existing wheel :frowning: .

@nikunj <<< tagged because I see you replied to a different thread re. Playground recent UI changes. :pray:

1 Like

Yeah, as it’s a free add-on for testing API (not meant to be a consumer tool), I’m not sure it’s super high priority, but it’s good to let them know.

This is the line of CSS that is being a jerk to you, turning off the bar:


TamperMonkey script, try on Firefox mobile:

// ==UserScript==
// @name         PlaygroundStylerMobile
// @namespace
// @version      0.1
// @description  Put the control bar back
// @author       _j
// @match*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Inject a style tag into the head of the document

@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}

(CSS Source:


I don’t use TamperMonkey or GreaseMonkey, so I created a Bookmarklet* equivalent:

// OpenAIPlaygroundShowPresets.js -- Bookmarklet to fix March 2024 CSS regressive bug (~"GM_addStyle" but without TamperMonkey or GreaseMonkey)  
// by Darren Semotiuk, see:

// BOOKMARKLET* for those of us not running TamperMonkey or GreaseMonkey
// *Simply add the one-liner below as a Favorite/Bookmark in your browser, no extensions required!

javascript:void function(){globalThis.GM_addStyle=globalThis.GM_addStyle||function(a){let b=document,c=b.head||b.body,d=b.createElement("style");d.type="text/css",d.innerText=a,c&&c.appendChild(d)},GM_addStyle("@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}}")}();

// raw source of above Bookmarklet:

globalThis.GM_addStyle = globalThis.GM_addStyle || ( function(innerText) {
  let doc = document;
  let head = doc.head || doc.body;
  let style=doc.createElement("style");
  if(head) head.appendChild(style);

} );

GM_addStyle("@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}");

// alert(document.styleSheets.length); // for testing to confirm it ran in OpenAI's JavaScript sandbox
1 Like

Thanks for highlighting this – we fixed the issue here. Let me know if you still see it (without your bookmarklet).


Looking good. The “advanced-toggle” button only is gone at width < 352px (or retina < 704), which would mostly make the playground a squint experience anyway.

"ThankYou! ".repeat(9001) :green_heart:

( @nikunj I don’t see a [Close as complete] button or similar, but LGTM!!! )