Custom stylesheet to make Element nicer and more compact (use with Stylus, or go to https://element.glitch.im/ which injects this gist's css into Element)

compact.css

/* 
 * Most recently tested with element-web 1.9.0 and the "experimental, compact IRC style layout" enabled
 * Questions? @peetz0r:glitch.im
 * Source: https://gist.github.com/Peetz0r/6a5fce5e0e39f4a7b87228608f6a00f4
 * Author: Peetz0r <element-compact-css@haas-en-berg.nl>
 * License: GPLv3
 */

/* Make room on the bottom for the url hover bar */
.mx_MessageComposer {
    padding-bottom: 1em !important;
}

/* limit size of image previews, shotgun approach. should also work for blurhashes */
.mx_MImageBody_thumbnail_container,
.mx_MImageBody_thumbnail_container * {
    object-fit: contain;
    object-position: left;
    max-height: 100px !important;
}

/* limit size of video sligtly less, because the controls become unusable */
video.mx_MVideoBody {
    max-height: 112px !important;
}

/* limit the size of link previews even more */
.mx_LinkPreviewWidget {
    margin: 2px 15px;
}
.mx_LinkPreviewWidget_image,
.mx_LinkPreviewWidget_image img {
    max-width: 42px !important;
    max-height: 42px !important;
}
.mx_LinkPreviewWidget_caption {
    max-height: 42px;
    overflow: hidden;
}

/* limit hights of code blocks */
.mx_EventTile_collapsedCodeBlock {
    max-height: 10em !important;
}

/* use a bit more of available horizontal space for messages */
.mx_EventTile_content {
    margin-right: 0;
}

/* tmp fix for https://github.com/vector-im/element-web/issues/17648 */
.mx_SenderProfile_mxid {
    display: none;
}

/* make long topics scrollable (no scrollbar visible though) */
.mx_RoomHeader_topic {
    overflow-y: scroll !important;
}

/* Hide the famous Buttons of Misclick Doom */
.mx_RoomHeader_videoCallButton, .mx_RoomHeader_voiceCallButton {
    display: none;
}