Refactor code structure for improved readability and maintainability

report_gen/page_4.html

@@ -13,19 +13,15 @@
       <h3 class="text-2xl font-bold text-center text-black mb-6">Body Composition</h3>
       
       <!-- Body Composition Chart -->
-      <div class="flex justify-center mb-8">
-        <div class="relative">
+      <div class="flex justify-center mb-16 w-full">
           <img src="data:image/png;base64, {{ body_composition_chart}}" 
                alt="Body Composition Chart" 
-               class="w-80 h-80 object-contain">
-          
-          <!-- Chart Labels -->
-        </div>
+               class=" object-contain ">
       </div>
 
       <!-- Body Fat Percentage Section -->
-      <div class="mb-8">
-        
+      <div class="mb-8">   
+        <h3 class="text-2xl font-bold text-center text-black mb-6">Body Fat Percentage - {{ fat_percentage }}%</h3>
         <!-- Body Fat Chart -->
         <div class="flex justify-center">
           <img src="data:image/png;base64, {{ body_fat_chart }}" 

report_gen/page_7.html

@@ -12,7 +12,7 @@
     </p>
     
     <!-- Lung Volume Chart -->
-    <img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full mb-6">
+    <img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full">
     
     <!-- Indications Box -->
     <div class="bg-gray-200 rounded-lg p-4 text-center mb-8">