fix: ensure form entry styling is consistent across browsers and platforms

Author: mario-zelger

src/pages/calendar/components/CalendarForm.tsx

@@ -203,7 +203,7 @@ function CalendarForm() {
                             </div>
                         </div>
 
-                        <input type="number" id="puffer" name="puffer" value={puffer.toString()}
+                        <input type="number" id="puffer" name="puffer" value={puffer.toString()} min="0"
                                onChange={onBufferChanged}/>
                     </div>
 

src/pages/calendar/components/calendar-form.less

@@ -12,12 +12,15 @@
       margin-bottom: 0.5em;
 
       @media (max-width: @header-nav-breakpoint) {
-        gap: 0.5em;
+        gap: 0.8em;
       }
     }
   }
 
   .form-entry {
+    display: grid;
+    gap: 4px;
+
     label {
       color: @color-primary;
       font-weight: 600;
@@ -27,15 +30,27 @@
       border: 1px solid black;
       width: 100%;
       margin: 0;
-      padding: 4px;
+      padding: 4px 8px;
       box-sizing: border-box;
       font-family: "Source Sans Pro", sans-serif;
       font-size: 1rem;
       border-radius: 3px;
+      background: transparent;
+      text-align: left;
+      color: #000;
+    }
+
+    input::-webkit-date-and-time-value {
+      text-align: left;
     }
 
     select {
-      padding: 4px 0;
+      -webkit-appearance: none;
+      appearance: none;
+      // Font Awesome Chevron Down icon
+      background-image: url('data:image/svg+xml;charset=utf8,<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 512 512" xml:space="preserve"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg>');
+      background-position: center right 4px;
+      background-repeat: no-repeat;
     }
 
     .label-with-icon {