fix alignments & spacing issue

core/static/user/user_edit.scss

@@ -1,9 +1,17 @@
+
+@media (max-width: 750px) {
+  .title {
+    text-align: center;
+  }
+}
+
 .profile {
   &-visible {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 5px;
+    padding-top: 10px;
 
     >input[type="checkbox"] {
       cursor: pointer;
@@ -39,6 +47,7 @@
 
     @media (max-width: 750px) {
       max-width: 100%;
+      padding: 10px 10px 0;
     }
 
     &-display {
@@ -86,16 +95,12 @@
   }
 
   &-fields {
-    padding: 20px 0;
+    padding: 10px 10px 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
-
-    @media (max-width: 750px) {
-      gap: 20px;
-    }
   }
 
   &-field {

core/static/user/user_stats.scss

@@ -1,3 +1,10 @@
+.container {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 .row {
   display: flex;
   flex-direction: row;
@@ -8,6 +15,7 @@
   gap: 30px;
 
   @media (max-width: 535px) {
+    gap: 20px;
 
     >div,
     >div>.flexed {

core/templates/core/user_edit.jinja

@@ -10,7 +10,7 @@
 {%- endblock -%}
 
 {%- block content -%}
-<h2>{%- trans -%}Edit user profile{%- endtrans -%}</h2>
+<h2 class="title">{%- trans -%}Edit user profile{%- endtrans -%}</h2>
 <form action="" method="post" enctype="multipart/form-data" id="user_edit">
 
     {%- csrf_token -%}

core/templates/core/user_stats.jinja

@@ -10,6 +10,7 @@
 {% endblock %}
 
 {% block content %}
+<div class="container">
 <div class="row">
     {% if profile.permanencies %}
     <div>
@@ -35,21 +36,24 @@
     </div>
 </div>
 
-<h3>{% trans %}Product top 10{% endtrans %}</h3>
-<table>
-    <thead>
-        <tr>
-            <td>{% trans %}Product{% endtrans %}</td>
-            <td>{% trans %}Quantity{% endtrans %}</td>
-        </tr>
-    </thead>
-    <tbody>
-        {% for p in top_product %}
-        <tr>
-            <td>{{ p['product__name'] }}</td>
-            <td>{{ p['product_sum'] }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+<div>
+    <h3>{% trans %}Product top 10{% endtrans %}</h3>
+    <table>
+        <thead>
+            <tr>
+                <td>{% trans %}Product{% endtrans %}</td>
+                <td>{% trans %}Quantity{% endtrans %}</td>
+            </tr>
+        </thead>
+        <tbody>
+            {% for p in top_product %}
+            <tr>
+                <td>{{ p['product__name'] }}</td>
+                <td>{{ p['product_sum'] }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+</div>
 {% endblock %}