WordPress / playground-tools

GNU General Public License v2.0
127 stars 38 forks source link

Playground block: Activate button going out of viewport #272

Closed adamziel closed 1 month ago

adamziel commented 1 month ago

When there's a lot of code, the activate preview button is vertically centered relative to the code editor height, which can make it go off screen:

CleanShot 2024-05-21 at 17 40 51@2x

cc @brandonpayton

brandonpayton commented 1 month ago

Ouch. That's a strange and annoying visual bug. Added to my list to take a look in the next day or so.

brandonpayton commented 1 month ago

@adamziel in my testing, this is not related to the height of the code because removing much of the code didn't affect the button position.

This issue appears to be due to a rule in the wpcom p2020 theme:

.p2-editor .wp-block-group :last-child,.entry-content .wp-block-group :last-child,.comment-content .wp-block-group :last-child {
    margin-bottom: 0;
}

This rule applies to the button that we style with margin: auto and causes it to be rendered at the bottom of the pane.