+
-/-
diff --git a/frontend/src/styles/profile.scss b/frontend/src/styles/profile.scss
index b6e83e645dad..8851df271e8a 100644
--- a/frontend/src/styles/profile.scss
+++ b/frontend/src/styles/profile.scss
@@ -414,10 +414,14 @@
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
+ .level,
+ .xp {
+ line-height: 0;
+ }
.xpBar {
- pointer-events: none;
+ pointer-events: auto;
height: 0.5rem;
- bottom: -0.25rem;
+ bottom: 0rem;
width: 100%;
left: 0;
background: var(--bg-color);
diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts
index 67e38a2fbab0..9e16fb2a1519 100644
--- a/frontend/src/ts/elements/profile.ts
+++ b/frontend/src/ts/elements/profile.ts
@@ -305,19 +305,19 @@ export async function update(
`${Numbers.abbreviateNumber(xpToDisplay)}/${Numbers.abbreviateNumber(
xpForLevel
)}`
- );
- details
- .find(".xpBar .bar")
- .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
- details
- .find(".xp")
+ )
.attr(
"aria-label",
`${Numbers.abbreviateNumber(
xpForLevel - xpToDisplay
)} xp until next level`
);
-
+ details
+ .find(".xpBar .bar")
+ .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
+ details
+ .find(".xpBar")
+ .attr("aria-label", `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`);
//lbs
if (banned) {
diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts
index bc0c2ad4a0b0..dedec6c71b5b 100644
--- a/frontend/src/ts/pages/profile.ts
+++ b/frontend/src/ts/pages/profile.ts
@@ -29,8 +29,8 @@ function reset(): void {
-