html {
    height: 100%;
}
body {
    margin: 0;
}

.SessionView {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.SessionView > .main {
    flex: 1;
    display: flex;
    min-height: 0;
    min-width: 0;
    width: 100vw;
}

/* mobile layout */
@media screen and (max-width: 800px) {
    .RoomHeader button.back { display: block; }
    div.RoomView, div.RoomPlaceholderView { display: none; }
    div.LeftPanel {flex-grow: 1;}
    div.room-shown div.RoomView { display: flex; }
    div.room-shown div.LeftPanel { display: none; }
    div.right-shown div.TimelinePanel { display: none; }
}

.LeftPanel {
    flex: 0 0 300px;
    min-width: 0;
}

.RoomPlaceholderView, .RoomView {
    flex: 1 0 0;
    min-width: 0;
}

.RoomView {
    min-width: 0;
    display: flex;
}


.TimelinePanel {
    flex: 3;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.TimelinePanel ul {
    flex: 1 0 0;
}

.RoomHeader {
    display: flex;
}