[FIX] website_profile: fix rank image display

Fix the rank image display which has currently
disappear by making it appear again in the xp circle.
Also making sure the xp circle tooltip is correctly
showing on hover.

Task-3285548

closes odoo/odoo#120408

X-original-commit: e96bd5a7ee4397440503ab4605f2df29d3a2d6f2
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/website_profile/static/src/scss/website_profile.scss

@@ -100,6 +100,10 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
     position: relative;
 
     svg.o_pc_circular_chart {
+        // Allow hover effect on svg paths in order to display bootstrap tooltip,
+        // by pushing the circular chart above the next rank info.
+        z-index: 1;
+        position: relative;
         display: block;
         max-width: 100%;
 
@@ -125,10 +129,6 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
 
     .o_pc_overlay {
         @include o-position-absolute(0,0,0,0);
-        // Allow hover effect on svg paths in order to display bootstrap tooltip,
-        // by pushing the absolute div behind it
-        z-index: -1;
-
         h4 {
             width: 60%;
             // only apply ellipsis when in non-edit mode, that way the editor can see the full value

addons/website_profile/views/website_profile.xml

@@ -329,7 +329,7 @@
                     <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
                 </linearGradient>
             </svg>
-            <div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
+            <div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center p-4">
                 <t t-set="rank_id" t-value="next_rank_id if next_rank_id else user.rank_id"/>
                 <div t-field="rank_id.image_1920"
                     t-attf-style="max-width: {{img_max_width or '50%'}};"