Некорректное отображение на телефоне

[nictic123]

Всем привет!

OFFTOP

Только, пожалуйста, не отправляйте в тему стиля :):)

Внёс правки в шаблон message_macros для отображения статуса и ника над аватаром.

На ПК версии все отображается корректно (на кривой баннер смотреть не надо, это совсем другая история). А вот как быть с этим?

Вот, кстати, нужный шаблон

Спойлер

<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName=""
    arg-dateHtml=""
    arg-linkHtml="">
   
    <span class="message-userArrow"></span>
    <section itemscope itemtype="https://schema.org/Person" class="message-user">
        <br>
        <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
        <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
        <br>
        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:if is="property('uix_postBitAvatarSize') == 'small'">
                    <xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
                <xf:elseif is="property('uix_postBitAvatarSize') == 'medium'" />
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:elseif is="property('uix_postBitAvatarSize') == 'large'" />
                    <xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />
                </xf:if>
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" data-xf-init="tooltip" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>
        <div class="uix_messagePostBitWrapper">
            <div class="message-userDetails">
                <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
                <xf:userbanners user="$user.display_style_group_id" tag="div" class="team_banner" itemprop="jobTitle" />
                <xf:if is="{$dateHtml}"><div class="message-date">{$dateHtml}</div></xf:if>
            </div>
            <xf:if is="{$linkHtml}"><div class="message-permalink">{$linkHtml}</div></xf:if>
            <xf:if is="$user.user_id">
                <xf:set var="$extras" value="{{ property('messageUserElements') }}" />
                <xf:if contentcheck="true">
                    <xf:if is="property('uix_collapseExtraInfo')">