Display: Fix style class in my_space/user_details.html.twig + format code

public/main/template/default/my_space/user_details.html.twig

@@ -8,15 +8,15 @@
     {% if details != true %}
 
         <div class="bg-white p-6 shadow-lg rounded-lg mb-10">
-        <div class="flex flex-wrap">
+            <div class="flex flex-wrap gap-4">
-            <div class="flex flex-auto lg:flex-1/3 items-start justify-left px-4 text-center lg:text-left">
+                <div class="flex flex-auto lg:flex-1/3 items-start justify-left text-center lg:text-left">
                     <div class="text-center">
                         <img class="w-36 h-36 rounded-full mb-4 m-auto" src="{{ user | illustration }}" alt="Avatar">
                         <h3 class="text-lg font-semibold">{{ user.getFullName }} ({{ user.username }})</h3>
                         <p class="text-gray-600">{{ user.email }}</p>
                     </div>
                 </div>
-            <div class="flex-auto lg:flex-1/3 px-4">
+                <div class="flex-auto lg:flex-1/3">
                     {{ display.reporting_user_details(user) }}
                     {% if user_extra.boss_list %}
                         <h3 class="font-semibold mt-4">{{ 'Student\'s superior'|trans }}</h3>
@@ -25,7 +25,7 @@
                         {% endfor %}
                     {% endif %}
                 </div>
-            <div class="flex-auto lg:flex-1/3 px-4">
+                <div class="flex flex-col lg:flex-1/3 gap-4">
                     {{ display.card_widget('First login in platform'|trans, user_extra.first_connection, 'calendar') }}
                     {{ display.card_widget('Latest login in platform'|trans, user_extra.last_connection, 'calendar') }}
 
@@ -46,7 +46,8 @@
                     <div class="flex flex-wrap">
                         <div class="flex flex-auto lg:flex-1/3 items-start justify-left px-4 text-center lg:text-left">
                             <div class="text-center">
-                            <img class="w-36 h-36 rounded-full mb-4 m-auto" src="{{ user | illustration }}" alt="Avatar">
+                                <img class="w-36 h-36 rounded-full mb-4 m-auto" src="{{ user | illustration }}"
+                                     alt="Avatar">
                                 <h3 class="text-lg font-semibold">{{ user.getFullName }} ({{ user.username }})</h3>
                                 <p class="text-gray-600">{{ user.email }}</p>
                             </div>
@@ -68,7 +69,8 @@
                     <div class="flex flex-wrap">
                         <div class="flex-auto lg:w-1/2 p-2">
                             <div class="easy-donut text-center">
-                            <div id="easypiechart-blue" title="{{ 'Progress'|trans }}" class="easypiechart" data-percent="{{ user_extra.student_progress }}">
+                                <div id="easypiechart-blue" title="{{ 'Progress'|trans }}" class="easypiechart"
+                                     data-percent="{{ user_extra.student_progress }}">
                                     <span class="percent">{{ user_extra.student_progress }}%</span>
                                 </div>
                                 <div class="easypiechart-legend">
@@ -78,7 +80,8 @@
                         </div>
                         <div class="flex-auto lg:w-1/2 p-2">
                             <div class="easy-donut text-center">
-                            <div id="easypiechart-red" title="{{ 'Score'|trans }}" class="easypiechart" data-percent="{{ user_extra.student_score }}">
+                                <div id="easypiechart-red" title="{{ 'Score'|trans }}" class="easypiechart"
+                                     data-percent="{{ user_extra.student_score }}">
                                     <span class="percent">{{ user_extra.student_score }} </span>
                                 </div>
                                 <div class="easy-donut text-center">
@@ -216,19 +219,19 @@
 
     <script>
       $(function() {
-        $('#easypiechart-blue').easyPieChart({
+        $("#easypiechart-blue").easyPieChart({
           scaleColor: false,
-            barColor: '#30a5ff',
+          barColor: "#30a5ff",
           lineWidth: 8,
-            trackColor: '#f2f2f2'
+          trackColor: "#f2f2f2"
-        });
+        })
 
-        $('#easypiechart-red').easyPieChart({
+        $("#easypiechart-red").easyPieChart({
           scaleColor: false,
-            barColor: '#f9243f',
+          barColor: "#f9243f",
           lineWidth: 8,
-            trackColor: '#f2f2f2'
+          trackColor: "#f2f2f2"
-        });
+        })
-    });
+      })
     </script>
 {% endautoescape %}