NO BUG: Editor save button getting out of viewport

Browser: Firefox current, did not check others but i guess it’s there
OS: macOS
URL: Backend

When scaling the page size down (like… ctrl/cmd + minus shorcut) at some breakpoint the top editor bar detaches from the left border and, since its fixed at 100% width, the right part of the bar gets out of viewport. Also, the left bar has no bg color of it’s own so at some widths its not that “readable”.

Adding a left: 0 to top bar css seems to fix the bar issue.



Hi @mofo,

I can’t replicate the issue locally , using FF. Even if I zoom out a lot, it still looks correct. Keep in mind that I have the mobile breakpoint open in the builder, so that’s why it’s so narrow.

Best regards,
Matej

try scaling the browser window down, i had this working on a laptop.

I can’t replicate it, however I resize a browser window. :thinking:

But, my question is, why? What is the use case to scale the browser to such small setting?

Matej

Working on my laptop i do that pretty often to check components and page template on larger sizes.

Also… on your screen the sidebars reach the vp edges, which is not the case on mine, like it’s handling the #bricks-builder-iframe-wrapper width in a different way (which is why your top bar is placed correctly ig…)

Wouldn’t that be more accurate if you used “Preview mode” for this? (This mode just hides all Builder UI). You can quickly do that with a keyboard shortcut.

I am no macOS, so maybe that’s different, if you are on Windows? Can you replicate this on Bricks playground as well?

Matej

The preview panel more or less has the same issues.

Also that way i could not edit while previewing (which kind is the point of working on a visual editor…) and the CMD+P is bound to the print command in FF. :smiley:

But… I think i know what’s causing this. I apologize in advance for wasting your time.

I’m working on a child theme, which comes from a theme I built on another core theme. The theme I’m working on as body max-width set.

For some reason [ig that’s how the builder works and its my fault… for not knowing it] the child theme style is loaded on backend too and not only in the preview frame.

So the max-width rule is applied to the builder frame too.

Then checked the Bricks child theme blueprint and learned that the child css must be wrapped this way:

// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}

Ah, yeah. Could happen, although in my case it works (I’m also using FF as main browser). So I guess it also depends on localization or anything else. However, we do need a keyboard shortcut manager, that is for sure :smiley:

Aha, thanks for letting me know. I’ll mark this one as a no-bug then :slight_smile:

Best regards,
Matej

1 Like