Update styles for results cells and enhance null safety for medical comments

Author: adamrefaey

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -554,10 +554,11 @@
   &__results-cell--test {
     flex: 2;
     font-size: 12px;
-    min-width: 160px;
+    min-width: 40px;
     overflow-wrap: break-word;
     white-space: normal; // Allow text to wrap
     word-break: break-word; // Ensure long words break
+    line-height: 1.4em;
   }
 
   &__results-cell--value {
@@ -579,11 +580,14 @@
     white-space: normal; // Allow text to wrap
     word-break: break-word; // Ensure long words break
     overflow-wrap: break-word;
+    line-height: 1.4em;
+    margin-left: 6px;
+    margin-top: 4px;
+    margin-bottom: 4px;
   }
 
   &__results-cell-header--test {
     flex: 2;
-    min-width: 160px;
     overflow-wrap: break-word;
     white-space: normal; // Allow text to wrap
     word-break: break-word; // Ensure long words break

frontend/src/pages/Reports/components/OriginalReportTab.tsx

@@ -77,7 +77,7 @@ const OriginalReportTab: React.FC<OriginalReportTabProps> = ({ reportData }) =>
       </div>
 
       {/* Medical Comments Section */}
-      {reportData.medicalComments.length > 0 && (
+      {reportData.medicalComments?.length > 0 && (
         <div className="report-detail-page__comments-section">
           <h4 className="report-detail-page__comments-title">Medical Comments:</h4>
           <div className="report-detail-page__comments-text">{reportData.medicalComments}</div>