From 915152cdc52fe0f5791d774d8dec02729551cfc7 Mon Sep 17 00:00:00 2001
From: Costas <23523864+CostasAK@users.noreply.github.com>
Date: Fri, 26 Jul 2024 20:55:32 +0200
Subject: [PATCH] fix: dialog width on small screens (#58)

Fixes #52
---
 src/routes/checklist.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/routes/checklist.tsx b/src/routes/checklist.tsx
index 65eefcb..1d330ab 100644
--- a/src/routes/checklist.tsx
+++ b/src/routes/checklist.tsx
@@ -292,18 +292,20 @@ function Todo({ name, reset, period = 0 }: TodoProps) {
       key={name}
       htmlFor={name}
       className={cn(
-        "flex cursor-pointer flex-row items-center gap-2 border-t border-t-neutral-725 p-4 transition-all hover:bg-neutral-750 active:transition-none",
+        "flex cursor-pointer flex-row flex-wrap items-center gap-2 border-t border-t-neutral-725 p-4 transition-all hover:bg-neutral-750 active:transition-none",
         completion > 0 && "italic opacity-50",
       )}
       style={{ order: nextReset / MINUTE + (completion > 0 ? 10 * YEAR : 0) }}
     >
-      <Checkbox
-        id={name}
-        onCheckedChange={handleChange}
-        checked={completion > 0}
-      />
-      <span>{name}</span>
-      <span className="mt-auto grow self-end text-right text-sm font-normal text-neutral-400">
+      <div className="flex flex-row items-center gap-2">
+        <Checkbox
+          id={name}
+          onCheckedChange={handleChange}
+          checked={completion > 0}
+        />
+        <span>{name}</span>
+      </div>
+      <span className="mt-auto grow self-end text-right text-sm font-normal leading-none text-neutral-400">
         {nextReset - now > 0 ? humanizeDuration(nextReset - now, true) : "now"}
       </span>
     </Label>