Patient top header line sticky on note single

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 96,
+    'asset_version' => 97,
 
 
     'temp_dir' => env('TEMP_DIR'),

public/css/style.css

@@ -2369,9 +2369,9 @@ body.in-iframe .main-row > .sidebar {
 }
 .note-container .note-lhs-tree.fixed, .note-container .note-lhs-tree.fixed-left {
     position: fixed;
-    top: 55px;
-    max-height: calc(100vh - 55px) !important;
-    height: calc(100vh - 55px) !important;
+    top: 91px;
+    max-height: calc(100vh - 91px) !important;
+    height: calc(100vh - 91px) !important;
     z-index: 1;
 }
 .note-container .note-lhs-tree.fixed ~ .note-rhs-content {
@@ -2474,10 +2474,10 @@ body.in-iframe .main-row > .sidebar {
 }
 .note-container .note-rhs-sidebar.fixed {
     position: fixed;
-    top: 55px;
+    top: 91px;
     right: 0;
-    max-height: calc(100vh - 55px) !important;
-    height: calc(100vh - 55px) !important;
+    max-height: calc(100vh - 91px) !important;
+    height: calc(100vh - 91px) !important;
     z-index: 1;
 }
 .note-container .note-rhs-sidebar.fixed ~ .note-rhs-content {
@@ -3659,4 +3659,20 @@ table.v-top th {
 }
 .stag-video-bar:not(.collapsed) [if-not-collapsed] {
     display: block;
-}
+}
+.mcp-theme-1 .sticky-note-header {
+    height: 36px !important;
+    border-bottom: 1px solid transparent;
+}
+.mcp-theme-1 .sticky-note-header.sticky {
+    position: fixed;
+    top: 55px;
+    width: calc(100% - 30px);
+    height: 36px;
+    z-index: 2;
+    background: #fff;
+    border-bottom: 1px solid #ccc;
+    left: 30px;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}

resources/views/app/patient/note/dashboard.blade.php

@@ -1718,7 +1718,8 @@ use App\Models\Handout;
                 let tree = $('#note-lhs-tree'), noteCardHeader = $('#note-card-header');
                 if(!noteCardHeader.length) return;
                 let resultTop = (noteCardHeader.offset().top + noteCardHeader.outerHeight(true)) - $(window).scrollTop();
-                if(resultTop <= 55) {
+                let topMin = $('#patient-top-most-header').length ? 91 : 55;
+                if(resultTop <= topMin) {
                     @if(!$note->is_signed_by_hcp)
                     tree.addClass('fixed');
                     @else
@@ -1749,7 +1750,8 @@ use App\Models\Handout;
                 let rhsSidebar = $('#note-rhs-sidebar'), noteCardHeader = $('#note-card-header');
                 if(!noteCardHeader.length) return;
                 let resultTop = (noteCardHeader.offset().top + noteCardHeader.outerHeight(true)) - $(window).scrollTop();
-                if(resultTop <= 55) {
+                let topMin = $('#patient-top-most-header').length ? 91 : 55;
+                if(resultTop <= topMin) {
                     rhsSidebar.addClass('fixed');
                     rhsSidebar.closest('.note-container').addClass('rhs-sidebar-fixed');
                 }
@@ -1759,6 +1761,13 @@ use App\Models\Handout;
                     rhsSidebar.css('height', 'calc(100vh - ' + resultTop + 'px)');
                     rhsSidebar.css('max-height', 'calc(100vh - ' + resultTop + 'px)');
                 }
+
+                if($(window).scrollTop() > 0) {
+                    $('.sticky-note-header').addClass('sticky');
+                }
+                else {
+                    $('.sticky-note-header').removeClass('sticky');
+                }
             }
             addMCInitializer('rhs-sidebar', init, '#note-rhs-sidebar');
         })();

resources/views/layouts/patient-header.blade.php

@@ -43,7 +43,7 @@ $addressParts .= implode(", ", $addressPart2);
     }
   }
 </style>
-<div class="p-2 mcp-theme-1 patient-header">
+<div class="px-2 pb-2 mcp-theme-1 patient-header">
   @if($patient->is_duplicate)
   <div class="alert alert-warning p-1 mb-2 border-dark mcp-theme-1 screen-only">
     <span class="text-dark">This chart is a duplicate of&nbsp;</span>
@@ -52,7 +52,7 @@ $addressParts .= implode(", ", $addressPart2);
     </a>
   </div>
   @endif
-  <div class="d-flex justify-content-between">
+  <div class="d-flex justify-content-between pt-2 {{request()->route()->getName() === 'patients.view.notes.view.dashboard' ? 'sticky-note-header' : ''}}" id="patient-top-most-header">
     <div class="d-flex align-items-center header-info mb-2">
       <h6 class="font-weight-bold">{{$patientName}},</h6>
       <h6 class="ml-2">{{$patient->age_in_years}} Y, {{$patient->sex}}</h6>