Change mobile full view

app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass

@@ -16,8 +16,6 @@
   @media only screen and (max-width: 679px)
     // Move button in the current reverse order to front
     order: +1
-    // give button full width
-    width: 100%
     padding-right: 0px
 
     a

app/assets/stylesheets/layout/_base_mobile.sass

@@ -70,3 +70,7 @@
 
   .jstElements
     display: none
+
+@include breakpoint(680px up)
+  .hidden-for-desktop
+    display: none

app/assets/stylesheets/layout/_work_package_mobile.sass

@@ -163,3 +163,19 @@
   body.controller-work_packages.action-show
     .work-packages--show-view
       padding: 0
+
+    #main-menu
+      display: none
+      &~ #content-wrapper
+        padding-top: 0 !important
+
+    #toolbar-items
+      position: absolute
+      top: 10px
+      justify-content: flex-end
+      .toolbar-item
+        flex-grow: 0
+    .wp-show--header-container
+      z-index: 2
+    .work-packages-full-view--split-container
+      border-top: none

app/assets/stylesheets/layout/_work_packages_full_view.sass

@@ -208,9 +208,6 @@ body.controller-work_packages.full-create
       font-size: 20px
       font-weight: bold
       line-height: 34px
-      @media only screen and (max-width: 679px)
-        // give subject full width
-        width: 100%
 
     .work-packages--subject-element
       &.work-packages--details--subject
@@ -226,9 +223,6 @@ body.controller-work_packages.full-create
 
 .work-packages--subject-type-row
   display: flex
-  @media only screen and (max-width: 679px)
-    // the children need to wrap on mobile as each child will be of 100% width
-    flex-wrap: wrap
 
   // Fix: align and size hover border like buttons in toolbar.
   .wp-edit-field.-no-label:not(.-active) .wp-table--cell-span
@@ -237,13 +231,10 @@ body.controller-work_packages.full-create
     margin-top: 2px
 
 .work-packages--type-selector
-  @media only screen and (max-width: 679px)
-    // Give it some space to the back button (same as below to subject)
-    margin-top: 10px
-    // full width for mobile
-    width: 100%
   .wp-table--cell-span
     padding-right: 5px !important
+    &:after
+      content: ':'
 
   // Remove left padding from type
   .wp-edit-field--display-field

frontend/app/components/routing/wp-show/wp.show.html

@@ -2,7 +2,7 @@
      class="work-packages--show-view"
      ng-if="$ctrl.workPackage">
 
-    <wp-breadcrumb work-package="$ctrl.workPackage"></wp-breadcrumb>
+    <wp-breadcrumb work-package="$ctrl.workPackage" class="hidden-for-mobile"></wp-breadcrumb>
 
     <div class="toolbar-container">
       <div id="toolbar">
@@ -22,7 +22,7 @@
           </ul>
         </div>
         <ul id="toolbar-items" class="toolbar-items hide-when-print">
-          <li class="toolbar-item">
+          <li class="toolbar-item hidden-for-mobile">
             <wp-create-button project-identifier="$ctrl.projectIdentifier"
                               allowed="!!$ctrl.workPackage.addChild"
                               state-name="work-packages.new"></wp-create-button>
@@ -42,6 +42,7 @@
                     locals="permittedActions,actionsAvailable,triggerMoreMenuAction"
                     title="{{I18n.t('js.button_more')}}">
               <op-icon icon-classes="button--icon icon-show-more"></op-icon>
+              <span class="button--text hidden-for-desktop">{{I18n.t('js.button_more')}}</span>
             </button>
           </li>
         </ul>

frontend/app/components/work-packages/wp-watcher-button/wp-watcher-button.directive.html

@@ -3,5 +3,5 @@
 
   <op-icon icon-classes="button--icon {{vm.watchIconClass}}"></op-icon>
 
-  <span class="button--text" ng-if="vm.showText" ng-bind="vm.buttonText"></span>
+  <span class="button--text" ng-class="vm.showText ? ''  : 'hidden-for-desktop'" ng-bind="vm.buttonText"></span>
 </button>