From 6480f8744094d5ce0f05d7d155925540ac73b156 Mon Sep 17 00:00:00 2001
From: Miguel Ribeiro <k.d.mitnick@gmail.com>
Date: Wed, 30 Oct 2024 17:45:13 +0100
Subject: [PATCH] fix: layout issue on the settings page (#598)

fix: improve localization
---
 includes/version.php |  2 +-
 index.php            |  9 ++++++++-
 stats.php            | 12 ------------
 styles/styles.css    |  6 ++++--
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/includes/version.php b/includes/version.php
index f9c07a770..0d3cc936b 100644
--- a/includes/version.php
+++ b/includes/version.php
@@ -1,3 +1,3 @@
 <?php
-$version = "v2.33.0";
+$version = "v2.33.1";
 ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index e3795db0f..a72ea394c 100644
--- a/index.php
+++ b/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']) ?>
diff --git a/stats.php b/stats.php
index bd147dfb5..02ea0b91c 100644
--- a/stats.php
+++ b/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,7 +436,6 @@ function getPriceConverted($price, $currency, $database, $userId)
       <?php
     }
     if ($inactiveSubscriptions > 0) {
-      $numberOfElements += 3;
       ?>
       <div class="statistic">
         <span><?= $inactiveSubscriptions ?></span>
@@ -448,7 +443,6 @@ function getPriceConverted($price, $currency, $database, $userId)
       </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
diff --git a/styles/styles.css b/styles/styles.css
index 6a3ad32ff..d4d4cddaf 100644
--- a/styles/styles.css
+++ b/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 {