fix - trial: improve mobile datetime visibility and formatting

Author: Ahmed-Maher77

index.html

@@ -271,7 +271,6 @@ <h2 class="lobster text-center mb-2">
                                             name="task-time"
                                             placeholder="mm/dd/yyyy - hh:mm:ss"
                                         />
-                                        <div class="time-placeholder d-md-none">mm/dd/yyyy - hh:mm:ss</div>
                                         <p class="invalid-feedback d-none">
                                             Please select a date and time.
                                         </p>

style.css

@@ -135,6 +135,17 @@ main > .container {
 .advanced-fields-toggle .fa-angle-down.active {
     rotate: -180deg;
 }
+#task-time {
+    position: relative;
+}
+#task-time::placeholder {
+    content: "mm/dd/yyyy - --:--:--";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-39%);
+    left: 13px;
+    color: var(--time-label-color);
+}
 .time-placeholder {
     width: fit-content;
     position: absolute;