css for small embeded riot [LICENSE: https://creativecommons.org/publicdomain/zero/1.0/]

stream.css

@media only screen and (max-width: 700px) {
    /* left panels */
    .mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
        display:none;
    }
    .mx_MatrixChat .mx_LeftPanel {
        display: none
    }
    .mx_RoomView .mx_RoomHeader {
        display: none;
    }
    
    /* right panel */
    .mx_MatrixChat .mx_RightPanel {
        /* make the right user-details-panel take the whole window */
        flex-grow: 1000;
        padding-left: 10px;
        padding-right: 10px;
    }
    .mx_RightPanel_header {
        margin-right: 0px;
    }
    .mx_MemberInfo {
        padding-right: 0px;
    }

    /* headers */
    .mx_RoomPreviewBar {
        height:auto;
    }
    .mx_AppsDrawer {
        margin: 0px;
    }
    .mx_RoomPreviewBar_preview_text {
        margin-top: 5px;
    }
    .mx_RoomView_auxPanel {
        /* move the register nag-box to the bottom where the compose box would be, */
        /* so people looking to write a message see the nag-box. */
        order: 4;
    }
    .mx_MatrixToolbar_clickable {
        /* The set-a-password-nag-box was unreadable in a narrow view. */
        height:auto;
    }

    /* random stuff */
    .mx_EventTile {
        padding-top:0px;
    }
    .mx_EventTile_line {
        margin-right: 0px;
    }
    .mx_MatrixChat .mx_MatrixChat_middlePanel {
        padding-left: 20px;
        padding-right: 22px;
    }
    .mx_MatrixChat .mx_MatrixChat_middlePanel {
        padding-left: 0px;
        padding-right: 0px;
    }    
    .mx_EventTile .mx_SenderProfile,
    .mx_EventTile_line {
        padding-left: 45px;
    }
    .mx_EventTile_info .mx_EventTile_line {
        padding-left: 63px;
    }
    .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
        left: 45px;
    }
    .mx_EventTile_avatar {
        top: 0px;
    }
    .mx_DateSeparator {
        margin-top: 10px;
    }
    .mx_RoomView_MessageList {
        margin-top: 3px;
    }

    
    /* move the context menu that opens from the "(...)-button" so it points to the right  */
    .mx_ContextualMenu.mx_ContextualMenu_left {
        left: auto;
        right: 26px;
    }
    .mx_ContextualMenu_chevron_left {
        left:auto;
        right: -8px;
        border-top: 8px solid transparent;
        border-left: 8px solid rgba(187,187,187,.5);
        border-bottom: 8px solid transparent;
        border-right:none;
    }
    .mx_ContextualMenu_chevron_left::after {
        content: none;
    }
    
    /* compose */
    mx_MessageComposer_row .mx_TintableSvg {
        width: 7px;
    }
    .mx_MessageComposer_row {
        flex-wrap: wrap;
    }
    .mx_MessageComposer .mx_MessageComposer_avatar {
        padding-right: 8px;
    }
    .mx_MessageComposer_e2eIcon {
        left: 18px;
    }
    .mx_MessageComposer_input_wrapper {
        min-width: calc(100% - 42px);
    }
    .mx_RoomView_statusAreaBox {
        display:none;
    }
    .mx_MessageComposer_formatbar {
        padding-left: 20px;
    }
    .mx_MessageComposer_formatbar > div:not([class]) {
        flex-grow: 0;
    }
    .mx_MessageComposer_formatbar_markdown {
        margin-right: 20px;
    }

    /* popups */
    .mx_Dialog {
        min-width: 75%;
        padding: 15px;
    }
    .mx_Dialog_content {
        margin: 24px 0px 24px 0;
    }
    .mx_ChatInviteDialog {
        padding-right: 0px;
    }
    .mx_Dialog_buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .mx_SetMxIdDialog_input {
        width: calc(100% - 30px)
    }

    /* image popup */
    .mx_Dialog_lightbox .mx_Dialog {
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        padding: 15px;
    }
    .mx_ImageView_labelWrapper {
        position: inherit;
        top: auto;
        right: auto;
        height: auto;
        overflow: inherit;
    }
    .mx_ImageView_cancel {
        padding: 15px;
    }
    .mx_ImageView_rhs,
    .mx_ImageView_lhs {
        display:none;
    }
    .mx_ImageView_content {
        flex-direction: column;
        height:100%;
    }

    /* TODO: maybe remove this line:
       display: inline-block;
       from:
       https://github.com/matrix-org/matrix-react-sdk/res/css/views/rooms/_EventTile.scss#L245

       as it also causes problems in the wide normal view.
   */
    .mx_EventTile_readAvatars {
        display:inherit;
    }
}

before:

after:

a bunch of screens: