fix: improve mobile datetime visibility and formatting

Author: Ahmed-Maher77

index.html

@@ -263,14 +263,15 @@ <h2 class="lobster text-center mb-2">
                                             Schedule
                                         </button>
                                     </div>
-                                    <div class="mb-3 mt-1 pt-1">
+                                    <div class="mb-3 mt-1 pt-1 position-relative">
                                         <input
                                             type="datetime-local"
                                             class="form-control"
                                             id="task-time"
                                             name="task-time"
-                                            placeholder="m/d/y - 00:00:00"
+                                            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>
@@ -469,7 +470,7 @@ <h2 class="lobster text-center mb-3 reveal-on-scroll">
             <div
                 class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-1 text-center text-md-start"
             >
-                <p class="mb-0 small">
+                <p class="mb-0 small d-flex flex-wrap justify-content-center gap-1">
                     Copyright &copy;
                     <span id="copyright-year"></span>
                     Designed and Developed by

style.css

@@ -135,6 +135,14 @@ main > .container {
 .advanced-fields-toggle .fa-angle-down.active {
     rotate: -180deg;
 }
+.time-placeholder {
+    width: fit-content;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-39%);
+    left: 13px;
+    color: var(--time-label-color);
+}
 
 /* Advanced fields toggle */
 .advanced-fields-toggle {
@@ -306,11 +314,6 @@ main > .container {
         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;