elpatron/beauty-bookings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize: Improve table column widths and text truncation

Browse Source 
- 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
This commit is contained in:
elpatron
2025-10-02 01:03:28 +02:00
parent 84fc9ee890
commit 9a104e8862
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/client/components/admin-treatments.tsx
View File

@@ -198,22 +198,22 @@ export function AdminTreatments() {
)} )}
<div className="bg-white rounded-lg shadow-lg overflow-x-auto"> <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"> <thead className="bg-gray-50">
<tr> <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 Behandlung
</th> </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 Kategorie
</th> </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 Dauer
</th> </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 Preis
</th> </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 Aktionen
</th> </th>
</tr> </tr>
@@ -221,22 +221,26 @@ export function AdminTreatments() {
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{treatments?.map((treatment) => ( {treatments?.map((treatment) => (
<tr key={treatment.id}> <tr key={treatment.id}>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4">
<div> <div>
<div className="text-sm font-medium text-gray-900">{treatment.name}</div> <div className="text-sm font-medium text-gray-900 truncate">{treatment.name}</div>
<div className="text-sm text-gray-500">{treatment.description}</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> </div>
</td> </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} {treatment.category}
</td> </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 {treatment.duration} Min
</td> </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)} € {(treatment.price / 100).toFixed(2)} €
</td> </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 <button
onClick={() => handleEdit(treatment)} onClick={() => handleEdit(treatment)}
className="text-pink-600 hover:text-pink-900" className="text-pink-600 hover:text-pink-900"