fix: visual issue with date fields on ios (#846)

.dockerignore

@@ -3,3 +3,8 @@
 
 # Exclude .git directory
 .git/
+.github/
+
+*.md
+.gitignore
+.dockerignore

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-$version = "v3.2.1";
+$version = "v3.2.2";
 ?>

index.php

@@ -385,17 +385,24 @@ $headerClass = count($subscriptions) > 0 ? "main-actions" : "main-actions hidden
       <div class="inline">
         <div class="split50">
           <label for="start_date"><?= translate('start_date', $i18n) ?></label>
+          <div class="date-wrapper">
             <input type="date" id="start_date" name="start_date">
           </div>
+        </div>
+        <button type="button" id="autofill-next-payment-button"
+          class="button secondary-button autofill-next-payment hideOnMobile"
+          title="<?= translate('calculate_next_payment_date', $i18n) ?>" onClick="autoFillNextPaymentDate(event)">
+          <i class="fa-solid fa-wand-magic-sparkles"></i>
+        </button>
         <div class="split50">
           <label for="next_payment" class="split-label">
             <?= translate('next_payment', $i18n) ?>
-            <div id="autofill-next-payment-button" class="autofill-next-payment"
+            <div id="autofill-next-payment-button" class="autofill-next-payment hideOnDesktop"
               title="<?= translate('calculate_next_payment_date', $i18n) ?>" onClick="autoFillNextPaymentDate(event)">
               <i class="fa-solid fa-wand-magic-sparkles"></i>
             </div>
           </label>
-          <div>
+          <div class="date-wrapper">
             <input type="date" id="next_payment" name="next_payment" required>
           </div>
         </div>
@@ -472,10 +479,12 @@ $headerClass = count($subscriptions) > 0 ? "main-actions" : "main-actions hidden
         </div>
         <div class="split33 mobile-split-50">
           <label for="cancellation_date"><?= translate('cancellation_notification', $i18n) ?></label>
+          <div class="date-wrapper">
             <input type="date" id="cancellation_date" name="cancellation_date">
           </div>
         </div>
       </div>
+    </div>
 
     <div class="form-group">
       <input type="text" id="url" name="url" placeholder="<?= translate('url', $i18n) ?>">

styles/styles.css

@@ -1238,6 +1238,8 @@ header #avatar {
 
 .form-group .inline .split50 {
   flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group.hide,
@@ -1330,13 +1332,20 @@ select {
   height: 50px;
 }
 
-input[type="date"] {
-  flex-grow: 1;
-  width: 100%;
+.date-wrapper {
   display: flex;
+  flex-grow: 0;
+  flex-direction: row;
+  flex-basis: 100%;
+  box-sizing: border-box;
+}
+
+input[type="date"] {
+  display: flex;
+  flex-grow: 1;
   flex-direction: row;
   align-items: center;
-  min-width: 85%;
+  flex-basis: 100%;
   box-sizing: border-box;
 }
 
@@ -2838,7 +2847,27 @@ input[type="radio"]:checked+label::after {
   }
 }
 
+.button.autofill-next-payment {
+    padding: 15px 15px !important;
+    margin-top: 22px;
+}
+
 .autofill-next-payment {
   color: var(--main-color);
   cursor: pointer;
 }
+
+.autofill-next-payment.hideOnDesktop {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .button.autofill-next-payment.hideOnMobile {
+    display: none !important;
+  }
+
+
+  .autofill-next-payment.hideOnDesktop {
+    display: block;
+  }
+}