From cce02b29ed35320af800e3a5bb3821171f2bf625 Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Fri, 6 Oct 2023 15:04:28 +0200
Subject: [PATCH] Fixed overflowing text, breaking buttons in new line,
 figuring out how header stacking works (flickering bug) [SCI-9435]

Fixed header stack stuttering [SCI-9435]

PR fix 01 [SCI-9435]
---
 app/assets/stylesheets/my_modules/protocol.scss  | 16 ++++++++++++++--
 .../vue/mixins/stackableHeadersMixin.js          |  1 -
 app/javascript/vue/protocol/container.vue        |  3 +--
 .../protocols/_protocol_status_bar.html.erb      |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss
index 073aa7b91..c4039e228 100644
--- a/app/assets/stylesheets/my_modules/protocol.scss
+++ b/app/assets/stylesheets/my_modules/protocol.scss
@@ -13,7 +13,9 @@
   .protocol-buttons-group {
     align-items: center;
     display: flex;
-    gap: 1rem;
+    flex-wrap: wrap;
+    column-gap: 1rem;
+    row-gap: .4rem;
   }
 
   .portocol-header-left-part {
@@ -47,7 +49,6 @@
       background-position: top;
       background-size: 10px 1px;
       background-repeat: repeat-x;
-
       border-bottom: 1px dotted transparent;
       content: "";
       display: inline-block;
@@ -102,3 +103,14 @@
     color: var(--sn-grey);
   }
 }
+
+@media screen and (max-width: 1395px) {
+  .task-section-header {
+    height: 7.44rem;
+  }
+
+  .protocol-buttons-group {
+    flex-wrap: wrap;
+    margin: 1rem;
+  }
+}
diff --git a/app/javascript/vue/mixins/stackableHeadersMixin.js b/app/javascript/vue/mixins/stackableHeadersMixin.js
index c9bbffe74..b5e14b3b0 100644
--- a/app/javascript/vue/mixins/stackableHeadersMixin.js
+++ b/app/javascript/vue/mixins/stackableHeadersMixin.js
@@ -95,7 +95,6 @@ export default {
         'top',
         stickyNavigationHeight + parseInt($(this.secondaryNavigation).css('top'), 10)
       );
-
       this.lastScrollTop = window.scrollY; // Save last scroll position to when user scroll up/down
     },
   },
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 179991260..7901bc65f 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -5,7 +5,7 @@
         <div class="portocol-header-left-part grow">
           <template v-if="headerSticked && moduleName">
             <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
-            <div @click="scrollTop" class="task-section-title w-[calc(100%_-_4rem)] cursor-pointer">
+            <div @click="scrollTop" class="task-section-title w-[calc(100%_-_4rem)] min-w-[5rem] cursor-pointer">
               <h2 class="truncate leading-6">{{ moduleName }}</h2>
             </div>
           </template>
@@ -428,7 +428,6 @@
         $.post(this.urls.publish_url, {version_comment: comment, view: 'show'})
       },
       scrollTop() {
-        console.log("clicekd")
         window.scrollTo(0, 0);
         setTimeout(() => {
           $('.my_module-name .view-mode').trigger('click');
diff --git a/app/views/my_modules/protocols/_protocol_status_bar.html.erb b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
index e4ee2d919..5b4f78b94 100644
--- a/app/views/my_modules/protocols/_protocol_status_bar.html.erb
+++ b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
@@ -1,4 +1,4 @@
-<div class="flex items-center dropdown my-module-protocol-status">
+<div class="flex items-center dropdown my-module-protocol-status whitespace-nowrap">
   <% if @protocol.linked? %>
     <span class="status-label linked">
       [<%= t("my_modules.protocols.protocol_status_bar.linked") %>]