Skip to content

Commit

Permalink
Fix issue with unified toolbar not fitting
Browse files Browse the repository at this point in the history
Fixes #10959.

This PR fixes an issue where at certain viewport widths, there wouldn't be room for the unified toolbar between the icons on the left, and the buttons on the right, in the editor bar. It does so by:

- Reducing the padding between toolbar segments
- Introducing a new breakpoint, xlarge (1080px), that allows the toolbar to stay in the editor bar for longer, before it stacks.
  • Loading branch information
Joen Asmussen committed Oct 24, 2018
1 parent 8df40f1 commit 5af7925
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 3 deletions.
2 changes: 2 additions & 0 deletions assets/stylesheets/_breakpoints.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
// Most used breakpoints
$break-huge: 1440px;
$break-wide: 1280px;
$break-xlarge: 1080px;
$break-large: 960px; // admin sidebar auto folds
$break-large: 960px; // admin sidebar auto folds
$break-medium: 782px; // adminbar goes big
$break-small: 600px;
Expand Down
6 changes: 6 additions & 0 deletions assets/stylesheets/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@
}
}

@mixin break-xlarge() {
@media (min-width: #{ ($break-xlarge) }) {
@content;
}
}

@mixin break-large() {
@media (min-width: #{ ($break-large) }) {
@content;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}

// Move toolbar into top Editor Bar.
@include break-large {
@include break-xlarge {
padding-left: $grid-size;
position: static;
left: auto;
Expand All @@ -64,11 +64,16 @@
}

.editor-block-toolbar {
margin: -9px 0;
margin: 0;
}

.editor-block-toolbar .components-toolbar {
padding: 9px;
padding: 0 $grid-size-small;
}

// Hide the right border on the ellipsis menu.
.editor-block-toolbar > div:last-child .components-toolbar {
border-right: none;
}
}
}

0 comments on commit 5af7925

Please sign in to comment.