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

@@ -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;
+  }
+}

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
     },
   },

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');

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") %>]