Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

When the editor is in Right or Left mode (the editors are stacked vertically along the left or right edge, as set by you from the icons in the footer), the Settings panels are at risk of opening below the bottom edge of the browser window. That’s a problem, because the editor isn’t a scrolling page; it’s exactly the size of the browser window. That means some settings might be totally inaccessible.

Before we introduced the ability to drag-resize the editors, it wasn’t as big of a deal. Based on which ones were minimized or maximized, I could tell if the editor should open upwards instead of downwards so the cut-off didn’t happen. But now that they editors can be manually resized, it’s possible an editor is open but so close to the bottom that if the settings panel opened downward it would cut off.

Luckily, jQuery UI (which we use for the dragging anyway) has a lovely position utility that does collision detection (collision = content cut-offs) and can help with it. We’re using it now for those settings panels. A GIF can explain:

I wrote more about the concept of collision detection over on CSS-Tricks