Optimize "Your Profile" for longer names in mobile

[KGS501]

Describe the Bug

Longer names break the your-profile.vue mobile optimization.

To Reproduce

Enter a long name in your-profile.vue at

<div class="ps-3 d-flex flex-column justify-content-between">
    <div>
        <h2 class="mb-0">{{profile.member.nick}}</h2>
    </div>
</div>

Expected behaviour

A longer name should not widen the background and continue above the profile picture, when passed a certain breakpoint. Ideally a name shich lenght surpasses the width of the vew-main-card will be cut of with "..."

Screenshots

No response