Mastodon v4: be more economical with vertical space

gistfile1.txt

/*
 * Make Mastodon v4 look more like Mastodon v3 with the avatars left
 * of the post content, and the post indented by the same space.
 * For use with a userstyle browser extension, e.g. Stylish.
 * Original URL: https://gist.github.com/rohieb/5861aad7241c28011c96a1b0636f1ca4
 * See example screenshot in https://chaos.social/@daniel_bohrer/111172981283274178
 */
 
.status__wrapper .status {
    padding: 8px 10px;
}
.status__wrapper .status__prepend, .notification__message {
    padding: 10px 10px 0;
    font-weight: normal;
    line-height: inherit;    
}
.status__wrapper .status__prepend {
    padding-left: 37px;
}
.notification__message {
    padding: 10px 10px 0 37px;
}
.notification .account {
    padding: 10px 10px 10px 20px;
}
.status__wrapper .status__display-name {
    align-items: start;
}
.status__wrapper .status__info {
    max-height: 0px;
    margin-bottom: 0px;
    margin-top: 20px;
    padding-bottom: 0;
}
.status__wrapper .status__info .status__display-name {
    align-items: start;
}
.status__wrapper .status__info .status__display-name .display-name__account {
    display: inline;
}
.status__wrapper .status__content, .status__wrapper .hashtag-bar {
    margin-inline-start: 56px;
    line-height: 20px;
}
.status__wrapper .status__content.status__content--collapsed {
    max-height: 335px;  /* should line up nicely with line-height */
}
.status__wrapper .status__content__read-more-button {
    margin-inline-start: 56px;
    padding-top: 4px;
}
.status__wrapper .status__content p {
    margin-bottom: 10px;
}
.detailed-status__wrapper .status__content p {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 130%;
}
.status__wrapper .status__content p:last-child {
    margin-bottom: 0;
}
.status__wrapper .status__content--with-spoiler p:first-child {
    margin-bottom: 4px;
}
.status__wrapper .status__action-bar {
    margin-top: 6px;
    margin-inline-start: 56px;
}
.status .attachment-list, .status .media-gallery {
    margin-top: 10px;
    padding-inline-start: 56px;
    max-height: 160px !important;
}
.status--in-thread .attachment-list, .status--in-thread .media-gallery {
    margin-inline-start: 0;
    width: 100%;
}
.status .status-card, .status .audio-player, .status .video-player {
    margin-top: 10px;
    margin-inline-start: 56px;
    aspect-ratio: inherit;
}
.status .audio-player, .status .video-player {
    width: inherit;
}
.status > div[style*="aspect-ratio"]:not([class]) {
     /* .audio-player and .video-player are in such a div without a class, which grows too much when margin'ed */
    aspect-ratio: inherit !important;
}
.status__wrapper .spoiler-button {
    padding-left: 28px;
}
.status__wrapper .spoiler-button--minified {
    left: 32px;
}
.status-card__title {
    font-size: inherit !important;
}
.status-card__host, .status-card__author {
    margin-top: 0;
    margin-bottom: 0;
}
.status-card__image {
    flex-basis: 60px;
}
.status-card__description:empty {
    display: none;
}