Remove the avatar column, just like in the mobile view

Tutrix

@Karl , this might be something for you to create an extension for 😊
or as an option in the Badge Labels Extension 😉

@media (min-width:768px) {
  .Post-container{
    --avatar-column-width: 0px !important;
  }
  .PostUser-badges {
    --avatar-column-width: 0 !important;
    float: left;
    position: relative;
    margin-left: calc(5px - var(--avatar-column-width));
    margin-top: -3px;
    width: fit-content;
    margin-right: 5px;
  }
  .Post-header:not(.item-bestAnswerPost .Post-header, .ReplyPlaceholder .Post-header) {
    margin-bottom:30px;
    left:70px;
    position:relative;
    margin-top:20px;
    margin-right:70px;
    padding-bottom:5px;
    width:fit-content
  }
    .ReplyPlaceholder .Post-header {
    left:85px;
    position:relative;
    margin-top:15px;
    margin-right:65px;
    padding-bottom:5px;
    width:fit-content
  }
  .Post-header>ul>li.item-isBestAnswer {
    margin-top:-4px
  }
}

before

after

Karl

Tutrix that’s neat!

Subarist

Tutrix
Would it be possible to apply this effect only to the first post of a discussion, rather than to replies?

Karl

Subarist You have access to my notes? I literally have that part planned out too lol

Tutrix

Subarist
You can do that, for example, using [data-number=“1”].

@media (min-width:768px) {
 .PostStream-item[data-number="1"] .Post-container{
    --avatar-column-width: 0px !important;
  }
 .PostStream-item[data-number="1"] .PostUser-badges {
    --avatar-column-width: 0 !important;
    float: left;
    position: relative;
    margin-left: calc(5px - var(--avatar-column-width));
    margin-top: -3px;
    width: fit-content;
    margin-right: 5px;
  }
 .PostStream-item[data-number="1"] .Post-header:not(.item-bestAnswerPost .Post-header, .ReplyPlaceholder .Post-header) {
    margin-bottom:30px;
    left:70px;
    position:relative;
    margin-top:20px;
    margin-right:70px;
    padding-bottom:5px;
    width:fit-content
  }
  .PostStream-item[data-number="1"].ReplyPlaceholder .Post-header {
    left:85px;
    position:relative;
    margin-top:15px;
    margin-right:65px;
    padding-bottom:5px;
    width:fit-content
  }
   .PostStream-item[data-number="1"] .Post-header>ul>li.item-isBestAnswer {
    margin-top:-4px
  }
}

Subarist

Tutrix
If you spent a little more time on discuss every day, I swear I could save half of my tokens every month. 😂

Wlork

Tutrix

Is it possible to leave the badges in the top-right corner on avatar , as they are by default?

Tutrix

Wlork

@media (min-width:768px) {
  .Post-container{
    --avatar-column-width: 0px !important;
  }
  .PostUser-badges {
    --avatar-column-width: 85px !important;    
    float: left;
    position: relative;
    margin-left: calc(5px - var(--avatar-column-width));
    margin-top: -24px;
    width: 64px;
    left: 15px;
  }
  .Post-header:not(.item-bestAnswerPost .Post-header, .ReplyPlaceholder .Post-header) {
    margin-bottom:30px;
    left:70px;
    position:relative;
    margin-top:20px;
    margin-right:70px;
    padding-bottom:5px;
    width:fit-content
  }
    .ReplyPlaceholder .Post-header {
    left:85px;
    position:relative;
    margin-top:15px;
    margin-right:65px;
    padding-bottom:5px;
    width:fit-content
  }
  .Post-header>ul>li.item-isBestAnswer {
    margin-top:-4px
  }
}

Tutrix

Here's the code for Flarum version 1.8.x

@media (min-width:768px) {
  .Post {
    padding-left:40px;
    margin-right:-10px
  }
  .Post-header:not(.item-bestAnswerPost .Post-header) {
    margin-bottom:30px;
    left:75px;
    position:relative;
    margin-top:15px;
    margin-right:65px;
    padding-bottom:5px;
    width:fit-content;
  }
  .Post-header>ul>li.item-isBestAnswer {
    margin-top:-4px
  }
  .PostUser-avatar:not(.ReplyPlaceholder .PostUser-avatar) {
    top:-25px;
    left:-75px;
  }
  .PostUser-badges {
    margin-top: -25px;
    left: 10px
  }
}

Maybe @Silvestrus can test it briefly, since my own site has too many CSS changes. 😉

Wlork

Tutrix Thank you 🙂