Merge pull request #1405 from umbraco/temp-U4-8367

U4-8367 Breadcrumb and save button breaks layout.

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -5,29 +5,31 @@
 .umb-editor-wrapper{
 	background: white;
 	position: absolute;
-	top: 0px; bottom: 0px; left: 0px; right: 0px;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
 }
 
 
-.umb-editor-header{
+.umb-editor-header {
 	background: @grayLighter;
 	border-bottom: 1px solid @grayLight;
-	position: absolute;
-	height: 99px;
-	top: 0px;
-	right: 0px;
-	left: 0px;
+	flex: 0 0 99px;
+	position: relative;
 }
 
 
 .umb-editor-container {
-	top: 101px;
-	left: 0px;
-	right: 0px;
-	bottom: 52px;
-	position: absolute;
-	clear: both;
+	position: relative;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 	overflow: auto;
+	flex: 1 1 100%;
 }
 
 .umb-editor-wrapper.-no-footer .umb-editor-container {
@@ -38,18 +40,12 @@
 	overflow: hidden;
 }
 
-.umb-editor-drawer{
+.umb-editor-drawer {
 	margin: 0;
 	padding: 10px 20px;
-	z-index: 999;
-	position: absolute;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
-	height: 31px;
-
 	background: @grayLighter;
 	border-top: 1px solid @grayLight;
+	flex: 1 0 31px;
 }
 
 

src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less

@@ -12,7 +12,7 @@
 .umb-editor-sub-header.-umb-sticky-bar {
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.16);
    transition: box-shadow 1s;
-   top: 101px; /* height of header: 100px + its bottom-border: 1px */
+   top: 100px; /* height of header */
    margin-top: 0;
    margin-bottom: 0;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less

@@ -2,16 +2,22 @@
    list-style: none;
    margin-bottom: 0;
    margin-left: 0;
+   display: flex;
+   flex-wrap: wrap;
 }
 
 .umb-breadcrumbs__ancestor {
-   display: inline-block;
+   display: flex;
 }
 
 .umb-breadcrumbs__ancestor-link,
 .umb-breadcrumbs__ancestor-text {
-   font-size: 11px;
-   color: #555;
+    font-size: 11px;
+    color: #555;
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .umb-breadcrumbs__ancestor-link {

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -483,13 +483,15 @@ input.umb-panel-header-description {
 .umb-editor-drawer-content {
   display: flex;
   align-items: center;
-  //justify-content: space-between;
 }
 
 .umb-editor-drawer-content__right-side {
 	margin-left: auto;
+    flex: 0 0 auto;
+    padding-left: 10px;
 }
 
 .umb-editor-drawer-content__left-side {
 	margin-right: auto;
+    padding-right: 10px;
 }

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-breadcrumbs.html

@@ -1,10 +1,10 @@
 <ul class="umb-breadcrumbs">
    <li class="umb-breadcrumbs__ancestor" ng-repeat="ancestor in ancestors">
 
-      <a ng-if="!$last" href="#/{{entityType}}/{{entityType}}/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link">{{ancestor.name}}</a>
+      <a ng-if="!$last" href="#/{{entityType}}/{{entityType}}/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link" title="{{ancestor.name}}">{{ancestor.name}}</a>
       <span ng-if="!$last" class="umb-breadcrumbs__seperator">&#47;</span>
 
-      <span class="umb-breadcrumbs__ancestor-text" ng-if="$last">{{ancestor.name}}</span>
+      <span class="umb-breadcrumbs__ancestor-text" ng-if="$last" title="{{ancestor.name}}">{{ancestor.name}}</span>
 
    </li>
 </ul>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -1,4 +1,4 @@
-<div class="umb-panel-header">
+<div class="umb-editor-header umb-panel-header">
 
     <div class="umb-panel-header-content-wrapper">