fix: fix table printing and chip styles in table

web/components/patients/PatientStateChip.tsx

@@ -31,7 +31,7 @@ export const PatientStateChip = ({ state, ...props }: PatientStateChipProps) =>
       {...props}
       color={getColor(state)}
       size={props.size ?? 'sm'}
-      className={clsx('font-[var(--font-space-grotesk)] uppercase text-xs', props.className)}
+      className={clsx('font-semibold uppercase text-xs', props.className)}
     >
       {translation('patientState', { state: state as string })}
     </Chip>

web/components/tables/PatientList.tsx

@@ -244,10 +244,10 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
         if (refreshingPatientIds.has(row.original.id)) return rowLoadingCell
         const sex = row.original.sex
         const colorClass = sex === Sex.Male
-          ? '!gender-male'
+          ? 'gender-male'
           : sex === Sex.Female
-            ? '!gender-female'
-            : 'bg-gray-600 text-white'
+            ? 'gender-female'
+            : 'gender-neutral'
 
         const label = {
           [Sex.Male]: translation('male'),
@@ -259,10 +259,10 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
           <>
             <span className="print:block hidden">{label}</span>
             <Chip
-              color={sex === Sex.Unknown ? 'neutral' : undefined}
+              color={undefined}
               coloringStyle="tonal"
               size="sm"
-              className={`${colorClass} font-[var(--font-space-grotesk)] uppercase text-xs print:hidden`}
+              className={`${colorClass} uppercase font-semibold text-xs print:hidden`}
             >
               <span>{label}</span>
             </Chip>
@@ -447,7 +447,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
             </IconButton>
           </div>
         </div>
-        <div className="relative">
+        <div className="relative print:static">
           {patientsLoading && (
             <div className="absolute inset-0 z-10 flex items-center justify-center bg-surface/80 rounded-lg min-h-48">
               <HelpwaveLogo animate="loading" color="currentColor" height={64} width={64} />

web/components/tables/TaskList.tsx

@@ -610,7 +610,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
             </IconButton>
           </div>
         </div>
-        <div className="flex-col-3 items-center relative">
+        <div className="flex-col-3 items-center relative print:static">
           {loading && (
             <div className="absolute inset-0 z-10 flex items-center justify-center bg-surface/80 rounded-lg min-h-48">
               <HelpwaveLogo animate="loading" color="currentColor" height={64} width={64} />

web/style/colors.css

@@ -11,9 +11,9 @@
   --color-gender-on-male: var(--color-white);
   --color-gender-male-hover: var(--color-blue-600);
 
-  --color-gender-neutral: var(--color-blue-500);
+  --color-gender-neutral: var(--color-gray-600);
   --color-gender-on-neutral: var(--color-white);
-  --color-gender-neutral-hover: var(--color-blue-600);
+  --color-gender-neutral-hover: var(--color-gray-700);
 
   --color-location-hospital: var(--color-red-100);
   --color-location-on-hospital: var(--color-red-700);

web/style/table-printing.css

@@ -20,9 +20,9 @@
     height: auto !important;
     margin: 0 !important;
     padding: 0 !important;
-    overflow: hidden !important;
+    overflow: auto !important;
     overflow-x: hidden !important;
-    overflow-y: hidden !important;
+    overflow-y: auto !important;
     max-height: none !important;
     max-width: 100% !important;
     background: white !important;
@@ -39,7 +39,8 @@
   }
 
   .print-content {
-    position: fixed;
+    position: absolute;
+    z-index: 10000 !important;
     width: 100% !important;
     max-width: 100% !important;
     left: 0 !important;