Mastodon v4: be more economical with vertical space

gistfile1.txt

/*
 * Make Mastodon v4 (advanced interface) look more like Mastodon v3 with the avatars left
 * of the post content, and the post indented by the same space.
 * Also optimize use of vertical space for smaller displays.
 * 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 {
    padding-inline-start: 42px; /* yes, this looks best… */
    padding-top: 8px;
    font-weight: normal;
    line-height: inherit;
}
.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, .status__wrapper .content-warning {
    margin-inline-start: 56px;
}
.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;
    margin-inline-start: 56px;
    max-height: 160px !important;
    width: calc(100% - 56px);
}
.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 > 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;
}
.hashtag-bar {
    margin-top: 8px;
}
.hashtag-bar a {
    padding: 0;
}
/* Link preview cards */
.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;
}

/* Media player */
.status .audio-player, .status .video-player {
    width: inherit;
}
.video-player__controls {
    padding: 0 8px;
}
.video-player__buttons-bar {
    padding: 2px;
}
.video-player__buttons .player-button {
    padding: 2px;
}

/* Notification column */
.notification-ungrouped .status__content, .notification-ungrouped .attachment-list, .notification-ungrouped .audio-player, .notification-ungrouped .content-warning, .notification-ungrouped .filter-warning, .notification-ungrouped .hashtag-bar, .notification-ungrouped .media-gallery, .notification-ungrouped .more-from-author, .notification-ungrouped .picture-in-picture-placeholder, .notification-ungrouped .status-card, .notification-ungrouped .status__action-bar, .notification-ungrouped .status__content, .notification-ungrouped .video-player {
    /* avatars in notifications are smaller than in timelines */
    margin-inline-start: 52px;
    width: calc(100% - 52px);   /* default in Mastodon 4.3 is calc(100% - 48px) */
}
.notification-ungrouped {
    padding: 0;
}
.notification-ungrouped__header {
    margin-bottom: 0;
    padding-top: 4px;
    padding-inline-start: 36px;
}
.notification-ungrouped .status__wrapper .status {
    padding-top: 4px; /* less vspace after notification header */
}
.notification-group {
    padding: 12px;
}
.notification-group__main__header {
    flex-direction: row;
}

/* Content Warnings / Subjects */
.content-warning {
    border: none;       /* NOTE: if you want to keep the stripes, delete this line */
    margin-bottom: 0;
    padding: 4px 8px;
}
.content-warning p {
    display: inline; /* make it share space with the "hide/show" button */
    margin-right: 8px;
}
.content-warning .link-button {
    display: inline; /* make it share space with the subject */
}