fix controls and errors blocks styles

app/assets/stylesheets/content/_in_place_editing.sass

@@ -1,5 +1,6 @@
 .inplace-editor
   display: inline
+  font-size: initial
   .ined-input-wrapper-inner
     display: inline
   &.busy
@@ -38,10 +39,9 @@
 
   .ined-input-wrapper
     display: inline
-    input, textarea
-      width: 370px
-    textarea
-      min-height: 200px
+    input
+      width: 90%
+      margin-bottom: -1px
   .ined-read-value
     display: inline
     &.default
@@ -57,32 +57,42 @@
     display: inline
     .ng-invalid
       background: lightpink!important
-  .ined-errors
-    position: absolute
-    line-height: 1.2em
-    width: 251px
-    padding: 5px
-    left: 0
-    bottom: -49px
-    background: white
-    border: 1px solid #cacaca
-    height: 42px
-  .ined-controls
-    position: absolute
-    bottom: -35px
-    right: 0
-    width: 120px
-    background: white
-    border: 1px solid #cacaca
-    text-align: center
-    a
-      width: 36px
+  .ined-dashboard
+    padding-left: 29px
+    min-height: 42px
+    width: 502px
+    .ined-errors
+      float: right
+      display: inline-block
+      line-height: 1.2em
+      width: 251px
+      padding: 5px
+      left: 251px
+      bottom: -11px
+      background: white
+      border: 1px solid #cacaca
+      min-height: 42px
+    .ined-controls
+      float: left
       display: inline-block
+      bottom: 17px
+      left: 29px
+      width: 120px
+      background: white
+      border: 1px solid #cacaca
       text-align: center
-      text-decoration: none
-      &:hover
-        background: #f0f0f0
+      a
+        width: 36px
+        display: inline-block
+        text-align: center
+        text-decoration: none
+        &:hover
+          background: #f0f0f0
   &.type-wiki_textarea
+    textarea
+      min-height: 200px
+      width: 100%
+      margin-bottom: -1px
     .ined-input-wrapper-inner
       display: block!important
     form
@@ -96,11 +106,16 @@
       position: relative
       display: inline-block
       float: right
-    .ined-controls
-      bottom: -6px
-    .ined-errors
-      bottom: -26px
-      width: 307px
+    .ined-dashboard
+      padding-left: 0px
+      width: 526px
+      .ined-controls
+        left: 0px
+        z-index: 1
+      .ined-errors
+        width: 307px
+    .jstHandle
+      display: none
     .jstElements
       display: inline
       bottom: -31px
@@ -123,14 +138,6 @@
           padding-left: 0
       .jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_ul, .jstb_ol
         display: inline
-  &.type-select
-    .ined-controls
-      right: auto
-      left: 0
-      bottom: -23px
-    .ined-errors
-      bottom: -44px
-      left: 119px
   &.type-select2
     display: inline-block
     width: 344px
@@ -140,13 +147,12 @@
       max-height: 100px
     input[type='text']
       width: 100%
+    .ined-dashboard
+      padding-left: 0px
+      width: 345px
     .ined-errors
-      bottom: -41px
-      left: 119px
       width: 225px
     .ined-controls
-      bottom: -27px
-      left: 0
     .ined-edit
       height: 175px
     .ined-read-value

app/assets/stylesheets/content/_work_packages.sass

@@ -29,7 +29,7 @@
 .work-packages--details-content
   font-size:  0.8125rem
 
-  h2
+  .wp-subject
     margin:       0
     padding:      0 0 4px 0
     font-size:    1.25rem
@@ -125,6 +125,7 @@
   display: block
 
 .select-type
+  padding-top: 3px
   line-height: 26px
   float: left
   color: $content-link-color

frontend/public/templates/components/inplace_editor.html

@@ -34,22 +34,24 @@
           <span ng-bind-html="previewHtml"></span>
         </div>
       </div>
-      <div class="ined-errors" ng-show="error" role="alert" ng-bind="error"></div>
-      <div class="ined-controls" ng-hide="isBusy">
-        <accessible-by-keyboard execute="editForm.$valid && submit(false)" class="ined-edit-save">
-          <icon-wrapper icon-name="yes" icon-title="{{ saveTitle }}">
-          </icon-wrapper>
-        </accessible-by-keyboard>
-        <accessible-by-keyboard execute="editForm.$valid && submit(true)" class="ined-edit-save-send">
-          <span title="{{ saveAndSendTitle }}">
-            <i class="icon-yes"></i>
-            <i class="icon-mail"></i>
-          </span>
-        </accessible-by-keyboard>
-        <accessible-by-keyboard execute="discardEditing()" class="ined-edit-close">
-          <icon-wrapper icon-name="close" icon-title="{{ cancelTitle }}">
-          </icon-wrapper>
-        </accessible-by-keyboard>
+      <div class="ined-dashboard">
+        <div class="ined-errors" ng-show="error" role="alert" ng-bind="error"></div>
+        <div class="ined-controls" ng-hide="isBusy">
+          <accessible-by-keyboard execute="editForm.$valid && submit(false)" class="ined-edit-save">
+            <icon-wrapper icon-name="yes" icon-title="{{ saveTitle }}">
+            </icon-wrapper>
+          </accessible-by-keyboard>
+          <accessible-by-keyboard execute="editForm.$valid && submit(true)" class="ined-edit-save-send">
+            <span title="{{ saveAndSendTitle }}">
+              <i class="icon-yes"></i>
+              <i class="icon-mail"></i>
+            </span>
+          </accessible-by-keyboard>
+          <accessible-by-keyboard execute="discardEditing()" class="ined-edit-close">
+            <icon-wrapper icon-name="close" icon-title="{{ cancelTitle }}">
+            </icon-wrapper>
+          </accessible-by-keyboard>
+        </div>
       </div>
     </form>
   </div>

frontend/public/templates/work_packages.list.details.html

@@ -32,14 +32,15 @@
 
   <div class="select-type">{{ workPackage.props.type }}:&nbsp;</div>
 
-  <h2
+  <div
+    class="wp-subject"
     inplace-editor
     ined-type="text"
     ined-entity="workPackage"
     ined-attribute="subject"
     ined-attribute-title="{{ I18n.t('js.work_packages.properties.subject') }}"
     title="{{ workPackage.props.subject }}"
-  ></h2>
+  ></div>
 
   <span class="subtitle">
     <accessible-by-keyboard ng-if="toggleWatchLink" execute="toggleWatch()" class="star">

frontend/tests/integration/work-package-details-spec.js

@@ -102,7 +102,7 @@ describe('OpenProject', function() {
     }
 
     describe('subject', function() {
-      var subjectEditor = $('h2 .inplace-editor');
+      var subjectEditor = $('.wp-subject .inplace-editor');
 
       context('work package with updateImmediately link', function() {
         beforeEach(function() {