feat: melhora responsividade e dialogos da interface

components/anotacoes/note-card.tsx

@@ -4,7 +4,7 @@ import {
 	RiArchiveLine,
 	RiCheckLine,
 	RiDeleteBin5Line,
-	RiEyeLine,
+	RiFileList2Line,
 	RiInboxUnarchiveLine,
 	RiPencilLine,
 } from "@remixicon/react";
@@ -60,7 +60,7 @@ export function NoteCard({
 		},
 		{
 			label: "detalhes",
-			icon: <RiEyeLine className="size-4" aria-hidden />,
+			icon: <RiFileList2Line className="size-4" aria-hidden />,
 			onClick: onDetails,
 			variant: "default" as const,
 		},
@@ -115,7 +115,9 @@ export function NoteCard({
 								</div>
 								<span
 									className={`leading-relaxed ${
-										task.completed ? "text-muted-foreground" : "text-foreground"
+										task.completed
+											? "text-muted-foreground line-through"
+											: "text-foreground"
 									}`}
 								>
 									{task.text}

components/anotacoes/note-details-dialog.tsx

@@ -72,11 +72,11 @@ export function NoteDetailsDialog({
 				</DialogHeader>
 
 				{isTask ? (
-					<div className="max-h-[320px] overflow-auto space-y-3">
+					<Card className="max-h-[320px] overflow-auto gap-2 p-2">
 						{sortedTasks.map((task) => (
-							<Card
+							<div
 								key={task.id}
-								className="flex gap-3 p-3 flex-row items-center"
+								className="flex items-center gap-3 px-3 py-1.5 space-y-1 rounded-md hover:bg-muted/50"
 							>
 								<div
 									className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
@@ -91,14 +91,16 @@ export function NoteDetailsDialog({
 								</div>
 								<span
 									className={`text-sm ${
-										task.completed ? "text-muted-foreground" : "text-foreground"
+										task.completed
+											? "text-muted-foreground line-through"
+											: "text-foreground"
 									}`}
 								>
 									{task.text}
 								</span>
-							</Card>
+							</div>
 						))}
-					</div>
+					</Card>
 				) : (
 					<div className="max-h-[320px] overflow-auto whitespace-pre-line wrap-break-word text-sm text-foreground">
 						{note.description}

components/anotacoes/note-dialog.tsx

@@ -338,7 +338,7 @@ export function NoteDialog({
 							</div>
 
 							{sortedTasks.length > 0 && (
-								<div className="space-y-1 max-h-[240px] overflow-y-auto pr-1">
+								<div className="space-y-1 max-h-[300px] overflow-y-auto pr-1 mt-4 rounded-md p-2 bg-card ">
 									{sortedTasks.map((task) => (
 										<div
 											key={task.id}