fix: narrow config pages on mobile

app/templates/account_groups/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Account Groups' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'account_groups_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'account_groups_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/accounts/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Accounts' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'accounts_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'accounts_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/categories/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Categories' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'categories_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'categories_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/currencies/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Currencies' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'currencies_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'currencies_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/exchange_rates/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Exchange Rates' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'exchange_rates_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'exchange_rates_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/installment_plans/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Installment Plans' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'installment_plans_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'installment_plans_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/recurring_transactions/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Recurring Transactions' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'recurring_transaction_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'recurring_transaction_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

app/templates/tags/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Tags' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'tags_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+<div hx-get="{% url 'tags_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
 {% endblock %}

frontend/src/styles/_animations.scss

@@ -105,8 +105,8 @@
     content: '';
     position: absolute;
     top: 0;
-    left: -8px;
+    left: 0;
-    right: -8px;
+    right: 0;
     bottom: 0;
     backdrop-filter: blur(4px);
     z-index: 100;