From 15cbc63a101f38395bb8d1559316b785c13a9fdf Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Fri, 6 Sep 2024 13:56:10 +0200
Subject: [PATCH] Avoid that the bottom bar has a line break on mobile which
 breaks the layout as it pushes the content to the top and thus behind the app
 header

---
 app/components/work_packages/split_view_component.sass        | 4 ++++
 .../components/wp-details/wp-details-toolbar.html             | 2 +-
 frontend/src/global_styles/layout/_toolbar_mobile.sass        | 2 +-
 frontend/src/global_styles/openproject/_mixins.sass           | 3 +++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/components/work_packages/split_view_component.sass b/app/components/work_packages/split_view_component.sass
index a6dfcb54e1ba..c9d6fd991206 100644
--- a/app/components/work_packages/split_view_component.sass
+++ b/app/components/work_packages/split_view_component.sass
@@ -7,3 +7,7 @@
   @media screen and (max-width: $breakpoint-lg)
     // Unfortunately, we have to enforce this style via !important as the resizer writes the width directly on the element as inline style
     min-width: unset !important
+
+  @media screen and (max-width: $breakpoint-sm)
+    .work-packages--details-toolbar-container
+      @include hide-button-texts
diff --git a/frontend/src/app/features/work-packages/components/wp-details/wp-details-toolbar.html b/frontend/src/app/features/work-packages/components/wp-details/wp-details-toolbar.html
index 320967c4ba4a..719812e30a69 100644
--- a/frontend/src/app/features/work-packages/components/wp-details/wp-details-toolbar.html
+++ b/frontend/src/app/features/work-packages/components/wp-details/wp-details-toolbar.html
@@ -19,7 +19,7 @@
 
           wpSingleContextMenu
           [wpSingleContextMenu-workPackage]="workPackage">
-    <span class="button--text" [textContent]="text.button_more"></span>
+    <span class="button--text button--text_without_icon" [textContent]="text.button_more"></span>
     <op-icon icon-classes="button--dropdown-indicator"></op-icon>
   </button>
 </div>
diff --git a/frontend/src/global_styles/layout/_toolbar_mobile.sass b/frontend/src/global_styles/layout/_toolbar_mobile.sass
index fc7826c25c9a..5d1ebee2ee6a 100644
--- a/frontend/src/global_styles/layout/_toolbar_mobile.sass
+++ b/frontend/src/global_styles/layout/_toolbar_mobile.sass
@@ -41,7 +41,7 @@
         margin: 0 0 0 10px
 
       // Hide toolbar button texts on mobile
-      .button--text:not(.button--text_without_icon),
+      @include hide-button-texts
       .icon-pulldown,
       .spot-icon_dropdown
         display: none
diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass
index 5d3debebcd06..3f60adeef5ba 100644
--- a/frontend/src/global_styles/openproject/_mixins.sass
+++ b/frontend/src/global_styles/openproject/_mixins.sass
@@ -274,6 +274,9 @@ $scrollbar-size: 10px
   font: inherit
   text-align: inherit
 
+@mixin hide-button-texts
+  .button--text:not(.button--text_without_icon)
+    display: none
 
 @mixin board-header-editable-toolbar-title
   line-height: normal !important