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 .
// ==UserScript==
// @name PlaygroundStylerMobile
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Put the control bar back
// @author _j
// @match https://platform.openai.com/playground*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Inject a style tag into the head of the document
GM_addStyle(`
@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}
`);
})();
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: https://community.openai.com/t/playground-recent-ui-changes-broke-mobile-experience/687130
// 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");
style.type="text/css";
style.innerText=innerText;
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
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.
.
