fix: dialog width on small screens (#58)

Fixes #52
CostasAK · Jul 26, 2024 · 915152c · 915152c
1 parent 7b5e527
commit 915152c
Showing 1 changed file with 10 additions and 8 deletions.
diff --git 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>