julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve text truncation in EditCheckboxModal

Browse Source 
- Added `min-w-0` to the title container to prevent overflow in the `EditCheckboxModal`.
- Updated task title and description elements to use `truncate` for better text handling and prevent layout issues.
This commit is contained in:
Julien Froidefond
2025-09-22 08:49:47 +02:00
parent 361fc0eaac
commit f9d0641d77
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/daily/EditCheckboxModal.tsx
View File

@@ -161,8 +161,8 @@ export function EditCheckboxModal({
// Tâche déjà sélectionnée // Tâche déjà sélectionnée
<div className="border border-[var(--border)] rounded-lg p-3 bg-[var(--muted)]/30"> <div className="border border-[var(--border)] rounded-lg p-3 bg-[var(--muted)]/30">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="font-medium text-sm">{selectedTask.title}</div> <div className="font-medium text-sm truncate">{selectedTask.title}</div>
{selectedTask.description && ( {selectedTask.description && (
<div className="text-xs text-[var(--muted-foreground)] truncate"> <div className="text-xs text-[var(--muted-foreground)] truncate">
{selectedTask.description} {selectedTask.description}
@@ -219,9 +219,9 @@ export function EditCheckboxModal({
className="w-full text-left p-3 hover:bg-[var(--muted)]/50 transition-colors border-b border-[var(--border)]/30 last:border-b-0" className="w-full text-left p-3 hover:bg-[var(--muted)]/50 transition-colors border-b border-[var(--border)]/30 last:border-b-0"
disabled={saving} disabled={saving}
> >
<div className="font-medium text-sm">{task.title}</div> <div className="font-medium text-sm truncate">{task.title}</div>
{task.description && ( {task.description && (
<div className="text-xs text-[var(--muted-foreground)] truncate mt-1"> <div className="text-xs text-[var(--muted-foreground)] truncate mt-1 max-w-full overflow-hidden">
{task.description} {task.description}
</div> </div>
)} )}