🐳 02/03 - 00:59 - fix sticky header with save to be sticky below primary header

index.html

@@ -252,12 +252,12 @@
         </aside>
 
         <!-- Main Content -->
-        <main class="ml-[72px] flex-1 p-6">
+        <main class="ml-[72px] flex-1 p-6 relative">
             <div class="max-w-content mx-auto">
                 
                 <!-- Page Sticky Header -->
-                <div class="sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-4 -mx-2 px-2">
-                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white border border-[#e5e7eb] rounded-xl p-4 shadow-sm">
+                <div class="sticky top-16 z-20 -mx-6 px-6 py-4 bg-white border-b border-[#e5e7eb] shadow-sm">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 max-w-content mx-auto">
                         <div>
                             <h1 class="text-xl font-semibold text-slate-900">Add Patient</h1>
                             <p class="text-sm text-slate-500 mt-0.5">Create a new patient record</p>
@@ -277,7 +277,7 @@
                     </div>
                     
                     <!-- Autosave Indicator -->
-                    <div class="flex items-center justify-end mt-2 text-xs text-slate-400 gap-2">
+                    <div class="flex items-center justify-end max-w-content mx-auto mt-2 text-xs text-slate-400 gap-2">
                         <span id="autosave-status" class="hidden items-center gap-1.5">
                             <span class="w-1.5 h-1.5 bg-green-500 rounded-full autosave-pulse"></span>
                             Autosaved
@@ -290,7 +290,7 @@
                 </div>
 
                 <!-- Form -->
-                <form id="patientForm" class="space-y-6 mt-2" onsubmit="event.preventDefault(); savePatient();">
+                <form id="patientForm" class="space-y-6 mt-6" onsubmit="event.preventDefault(); savePatient();">
                     
                     <!-- Duplicate Warning Banner (Hidden by default) -->
                     <div id="duplicate-warning" class="hidden bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">