From 64741447ad312f1e8c998803640fa1547d27c575 Mon Sep 17 00:00:00 2001
From: DasProffi <67233923+DasProffi@users.noreply.github.com>
Date: Sat, 14 Mar 2026 11:00:56 +0100
Subject: [PATCH] fix: fix table printing and chip styles in table

---
 web/components/patients/PatientStateChip.tsx |  2 +-
 web/components/tables/PatientList.tsx        | 12 ++++++------
 web/components/tables/TaskList.tsx           |  2 +-
 web/style/colors.css                         |  4 ++--
 web/style/table-printing.css                 |  7 ++++---
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/components/patients/PatientStateChip.tsx b/web/components/patients/PatientStateChip.tsx
index 5a57a58..de21a98 100644
--- a/web/components/patients/PatientStateChip.tsx
+++ b/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>
diff --git a/web/components/tables/PatientList.tsx b/web/components/tables/PatientList.tsx
index 06ad2fb..e1450d4 100644
--- a/web/components/tables/PatientList.tsx
+++ b/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} />
diff --git a/web/components/tables/TaskList.tsx b/web/components/tables/TaskList.tsx
index 72945de..3e6554e 100644
--- a/web/components/tables/TaskList.tsx
+++ b/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} />
diff --git a/web/style/colors.css b/web/style/colors.css
index 7c42222..0de5b55 100644
--- a/web/style/colors.css
+++ b/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);
diff --git a/web/style/table-printing.css b/web/style/table-printing.css
index 7a4bbee..b156ad5 100644
--- a/web/style/table-printing.css
+++ b/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;