[28206] Consolidate margins in toolbars

https://community.openproject.com/wp/28206

app/assets/stylesheets/layout/_toolbar.sass

@@ -44,7 +44,7 @@ $nm-color-success-background: #d8fdd1
     text-decoration: none
 
 @mixin toolbar-element-sizing
-  margin: 0.625rem 0 0
+  margin: 0
   height: 34px
   line-height: 22px
 
@@ -63,10 +63,12 @@ $nm-color-success-background: #d8fdd1
     position: relative
 
 .toolbar
-  ul
-    margin:  0
-    padding: 0
-    float: right
+  display: flex
+  align-items: center
+
+.toolbar-items
+  margin:  0
+  padding: 0
 
   li
     list-style-type: none
@@ -175,11 +177,11 @@ $nm-color-success-background: #d8fdd1
         vertical-align: text-top
 
 .title-container
-  @include clearfix
-  float:   left
-  height:  auto
+  flex: 1
   padding: 0
-  width: 50%
+
+  h2
+    padding: 0
 
   div.inline-edit
     cursor: pointer

app/assets/stylesheets/layout/work_packages/_table.sass

@@ -59,8 +59,7 @@
   height: 100%
 
   > .toolbar-container
-    margin-top: 0.5rem
-    margin-bottom: 0
+    margin: 1rem 0
     // not flex-item
     padding-right: 15px
 

frontend/src/app/components/wp-query-select/wp-query-selectable-title.html

@@ -25,5 +25,5 @@
 <h2 *ngIf="!editable"
     [attr.title]="selectedTitle"
     [ngClass]="{ '-disabled': disabled }"
-    class="ellipsis"> {{ selectedTitle | slice:0:50 }}
+    class="ellipsis wp-query-selectable-title--fixed"> {{ selectedTitle | slice:0:50 }}
 </h2>

frontend/src/app/components/wp-query-select/wp-query-selectable-title.sass

@@ -2,6 +2,9 @@
   display: flex
   align-items: center
 
+.wp-query-selectable-title--fixed
+  padding: 0
+
 .wp-query-selectable-title--save
   span:before
     color: #5F5F5F