fix: layout issue on the settings page (#598)

fix: improve localization

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-$version = "v2.33.0";
+$version = "v2.33.1";
 ?>

index.php

@@ -563,12 +563,19 @@
       </div>
     </div>
 
+    <?php
+      $orderedSubscriptions = $subscriptions;
+      usort($orderedSubscriptions, function ($a, $b) {
+        return strnatcmp(strtolower($a['name']), strtolower($b['name']));
+      });
+    ?>
+
     <div class="form-group hide" id="replacement_subscritpion">
       <label for="replacement_subscription_id"><?= translate('replaced_with', $i18n) ?>:</label>
       <select id="replacement_subscription_id" name="replacement_subscription_id">
         <option value="0"><?= translate('none', $i18n) ?></option>
         <?php
-        foreach ($subscriptions as $sub) {
+        foreach ($orderedSubscriptions as $sub) {
           if ($sub['inactive'] == 0) {
             ?>
             <option value="<?= htmlspecialchars($sub['id']) ?>"><?= htmlspecialchars($sub['name']) ?>

stats.php

@@ -257,7 +257,6 @@ function getPriceConverted($price, $currency, $database, $userId)
   }
 }
 
-$numberOfElements = 6;
 ?>
 <section class="contain">
   <?php
@@ -413,7 +412,6 @@ function getPriceConverted($price, $currency, $database, $userId)
     </div>
     <?php
     if (isset($budgetUsed)) {
-      $numberOfElements += 1;
       ?>
       <div class="statistic">
         <span><?= number_format($budgetUsed, 2) ?>%</span>
@@ -422,7 +420,6 @@ function getPriceConverted($price, $currency, $database, $userId)
       <?php
     }
     if (isset($budgetLeft)) {
-      $numberOfElements += 1;
       ?>
       <div class="statistic">
         <span><?= CurrencyFormatter::format($budgetLeft, $code) ?></span>
@@ -431,7 +428,6 @@ function getPriceConverted($price, $currency, $database, $userId)
       <?php
     }
     if (isset($overBudgetAmount)) {
-      $numberOfElements += 1;
       ?>
       <div class="statistic">
         <span><?= CurrencyFormatter::format($overBudgetAmount, $code) ?></span>
@@ -440,15 +436,13 @@ function getPriceConverted($price, $currency, $database, $userId)
       <?php
     }
     if ($inactiveSubscriptions > 0) {
-      $numberOfElements += 3;
       ?>
       <div class="statistic">
         <span><?= $inactiveSubscriptions ?></span>
         <div class="title"><?= translate('inactive_subscriptions', $i18n) ?></div>
       </div>
       <?php
       if ($totalSavingsPerMonth > 0) {
-        $numberOfElements += 2;
         ?>
         <div class="statistic">
           <span><?= CurrencyFormatter::format($totalSavingsPerMonth, $code) ?></span>
@@ -461,12 +455,6 @@ function getPriceConverted($price, $currency, $database, $userId)
         <?php
       }
     }
-
-    if (($numberOfElements + 1) % 3 == 0) {
-      ?>
-      <div class="statistic empty"></div>
-      <?php
-    }
     ?>
   </div>
   <?php

styles/styles.css

@@ -1800,7 +1800,7 @@ button.dark-theme-button i {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 20px;
-  justify-content: space-between;
+  justify-content: flex-start;
 }
 
 .statistic {
@@ -1812,9 +1812,11 @@ button.dark-theme-button i {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex-basis: 31%;
+  flex-basis: calc(33.333% - (20px * 2 / 3));
   flex-shrink: 0;
   box-sizing: border-box;
+  flex-grow: 0;
+  overflow: hidden;
 }
 
 .statistic.short {