From 9a104e8862c5f6057ce231e0223617a91d7ba669 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Thu, 2 Oct 2025 01:03:28 +0200
Subject: [PATCH] Optimize: Improve table column widths and text truncation

- Added table-fixed layout for consistent column widths
- Set specific column widths: Behandlung (2/5), Kategorie (1/6), Dauer (1/12), Preis (1/12), Aktionen (1/6)
- Truncate long descriptions to 50 characters with tooltip
- Added truncate class to prevent text overflow
- Ensures all columns are always visible without horizontal scrolling
---
 src/client/components/admin-treatments.tsx | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/client/components/admin-treatments.tsx b/src/client/components/admin-treatments.tsx
index 6d89767..050208e 100644
--- a/src/client/components/admin-treatments.tsx
+++ b/src/client/components/admin-treatments.tsx
@@ -198,22 +198,22 @@ export function AdminTreatments() {
       )}
 
       <div className="bg-white rounded-lg shadow-lg overflow-x-auto">
-        <table className="w-full">
+        <table className="w-full table-fixed">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="w-2/5 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Behandlung
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="w-1/6 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Kategorie
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="w-1/12 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Dauer
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="w-1/12 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Preis
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th className="w-1/6 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Aktionen
               </th>
             </tr>
@@ -221,22 +221,26 @@ export function AdminTreatments() {
           <tbody className="bg-white divide-y divide-gray-200">
             {treatments?.map((treatment) => (
               <tr key={treatment.id}>
-                <td className="px-6 py-4 whitespace-nowrap">
+                <td className="px-6 py-4">
                   <div>
-                    <div className="text-sm font-medium text-gray-900">{treatment.name}</div>
-                    <div className="text-sm text-gray-500">{treatment.description}</div>
+                    <div className="text-sm font-medium text-gray-900 truncate">{treatment.name}</div>
+                    <div className="text-sm text-gray-500 truncate" title={treatment.description}>
+                      {treatment.description.length > 50 
+                        ? `${treatment.description.substring(0, 50)}...` 
+                        : treatment.description}
+                    </div>
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                <td className="px-6 py-4 text-sm text-gray-900 truncate">
                   {treatment.category}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                <td className="px-6 py-4 text-sm text-gray-900">
                   {treatment.duration} Min
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                <td className="px-6 py-4 text-sm text-gray-900">
                   {(treatment.price / 100).toFixed(2)} €
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                <td className="px-6 py-4 text-sm font-medium space-x-2">
                   <button
                     onClick={() => handleEdit(treatment)}
                     className="text-pink-600 hover:text-pink-900"