fix: improve datetime visibility on mobile screens

Author: Ahmed-Maher77

index.html

@@ -269,6 +269,7 @@ <h2 class="lobster text-center mb-2">
                                             class="form-control"
                                             id="task-time"
                                             name="task-time"
+                                            placeholder="m/d/y - 00:00:00"
                                         />
                                         <p class="invalid-feedback d-none">
                                             Please select a date and time.

js/app.js

@@ -1106,12 +1106,52 @@ function showTaskLists(tasks) {
 function formatDateTime(dateTime) {
     if (!dateTime) return "";
 
-    const date = new Date(dateTime);
-    return date.toLocaleString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-    });
+    try {
+        const date = new Date(dateTime);
+        if (isNaN(date.getTime())) return "";
+
+        const now = new Date();
+        const isToday = date.toDateString() === now.toDateString();
+        const isThisYear = date.getFullYear() === now.getFullYear();
+
+        // Check if mobile screen
+        const isMobile = window.innerWidth <= 576;
+
+        if (isMobile) {
+            // Compact format for mobile: "Today 2:30 PM" or "Jan 15, 2:30 PM"
+            if (isToday) {
+                return `Today ${date.toLocaleTimeString(undefined, {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                })}`;
+            } else if (isThisYear) {
+                return date.toLocaleDateString(undefined, {
+                    month: "short",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                });
+            } else {
+                return date.toLocaleDateString(undefined, {
+                    month: "short",
+                    day: "numeric",
+                    year: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                });
+            }
+        } else {
+            // Full format for desktop
+            return date.toLocaleString(undefined, {
+                hour: "2-digit",
+                minute: "2-digit",
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+            });
+        }
+    } catch (error) {
+        console.error("Error formatting datetime:", error);
+        return "";
+    }
 }

style.css

@@ -294,6 +294,37 @@ main > .container {
     .tasks-filters {
         justify-content: flex-start !important;
     }
+
+    /* Ensure datetime is visible on mobile */
+    .time-label {
+        font-size: 0.8rem !important;
+        word-break: break-word;
+        text-align: right;
+        white-space: normal;
+        line-height: 1.3;
+        width: 100%;
+        margin-top: 0.5rem;
+    }
+
+    /* Adjust wrapper layout on mobile */
+    .custom-list-item .wrapper {
+        flex-wrap: wrap;
+    }
+
+    .custom-list-item .wrapper .content {
+        flex: 1 1 100%;
+        min-width: 0;
+    }
+
+    .custom-list-item .wrapper .actions {
+        flex: 0 0 auto;
+    }
+
+    /* Ensure datetime-local input is visible on mobile */
+    #task-time {
+        font-size: 1rem !important;
+        min-height: 44px; /* iOS touch target size */
+    }
 }
 
 .task-weekly-summary {
@@ -381,6 +412,13 @@ main > .container {
 .custom-list-item.task-completed .time-label {
     color: var(--time-label-color);
 }
+
+/* Ensure time label is always visible */
+.time-label {
+    min-width: 0; /* Allow flex shrinking */
+    flex-shrink: 1;
+    overflow: visible;
+}
 .task-complete-btn {
     display: inline-flex;
     align-items: center;