التعديل سيكون فقط في قالب واحد فالأمر سهل جدا ... هدا التعديل لا يضهر في وضع الجوال

النتيجة:

extra.less

في الأسفل أضف الكود التالي ولا تنس حفظ.

/* MAAIDNI POSTBIT1 - Start */
@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }
}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    background: #f5f5f5;
    margin-right: -10px
}

.message-userArrow {
    top: 0px !important;
    right: 0px !important;
    border: 0px solid transparent !important
}

.message-userArrow:after {
    border: 0px solid transparent !important
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: left !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    border: 1px solid #020202;
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}
/* MAAIDNI POSTBIT1 - Start */